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

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

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


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


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

再配合ls的lazyload

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


jquery.lazyload


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


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

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

【热门文章】
【热门文章】