javascript - 一个网页图片过多怎么优化页面的加载速度

Question

在项目中遇到一个情况 就是我的页面的图片很多，并且都是很大的图片 并且有的图片是背景插进去的有的是img链接进去的 图片加载的速度很慢 请问怎么优化

Answer 1

• 图片尺寸要符合坑位大小

• 图片要进行压缩，最优采用webp格式

• 对图片使用懒加载

• 对非首屏的dom进行懒加载

• 对css请求进行合并

• 对js进行异步加载

为的就是快速让浏览器解析DOM, CSSOM, 从而进行渲染。

还有很多其他的优化方案，个人认为比较重要的就是缓存机制。

Answer 2

jquery.lazyload

Answer 3

看看应用本身是否可以用一些低质量的图片，可以的话就换低质量的图片，大图用户点击之后再搞

再配合ls的lazyload

background不晓得lazyload是否支持，不支持的话需要自己写个

Answer 4

这里重点说图片部分的优化。
首先尝试优化图片大小，裁尺寸，降质量，根据颜色多少或者透明度情况等选择jpg,png8,png32等。当然如果不考虑兼容性可以上webp。
然后按需加载，根据不同屏幕状况提供不同的图片，比如屏幕尺寸，dpi等。
然后lazyload，首屏重点保证，其他可以根据事件触发来加载。
然后加载的时候可以先加载模糊版本，然后过渡到正常版本或者高清版本。可以用canvas做到比较好的过渡效果。

Answer 5

静态文件，比如图片，使用七牛一类的云加速