Skip to content

一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验。

  • 图片懒加载:在页面上的未可视区域可以添加一个滚动事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。
  • 图片预加载:如果为幻灯片或相册,预先加载当前展示图片的前一张和后一张
  • 使用CSS spriteSVG spriteIconfontBase64
  • 如果图片过大,可以先加载一张经过特别压缩的图片缩略图,提高用户体验
  • 如果图片展示区域小于图片真实大小,则应在服务端先对图片进行合理压缩,使其与展示区域一致
  • 响应式图片,srcset
  • 图床 + CDN
  • webworker并行加载

苏ICP备2025160170号-1 | 前端进化之路 | Released under the MIT License.