图片数量较多的网站（电商）该如何优化

        打开淘宝，第一感觉是加载速度还行，不会出现长时间等待页面还无法完全加载的情况。那么这是如何做到在图片量过多而不影响用户体验的呢？

下面给出自己在项目中总结的优化建议

1：懒加载

        添加一个滚动条事件，判断图片位置、浏览器顶端的与页面的距离，如果前者小于后者就优先加载。

2：压缩

        一：图片展示大小小于DOM元素大小，可以从服务端开始压缩至同等大小达到减小体积的效果。

       二：如果图片过大，可以使用特殊编码格式的图片。加载中会先预先加载一张压缩过后的图片，提高用户体验。

3：预加载

       我们通常会遇到相册、幻灯片、轮播图等，这里我们可以优先预加载前一张与后一张图片，提高用户体验。

4：CSS图片

      如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。

5：精灵图

        也叫雪碧图，整个页面的小图做一个合集，根据对应图片位置的不同设置对应的位置，极大减少加载数量

如果你有更好的建议欢迎在评论区留言