一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验。
- 图片懒加载:在页面上的未可视区域可以添加一个滚动事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。
- 图片预加载:如果为幻灯片或相册,预先加载当前展示图片的前一张和后一张
- 使用
CSS sprite
、SVG sprite
、Iconfont
、Base64
- 如果图片过大,可以先加载一张经过特别压缩的图片缩略图,提高用户体验
- 如果图片展示区域小于图片真实大小,则应在服务端先对图片进行合理压缩,使其与展示区域一致
- 响应式图片,srcset
- 图床 + CDN
- webworker并行加载