什么是懒加载？
只加载可视区的内容，当页面向下滚动时，再继续加载后面的内容。
图片懒加载的原理其实非常简单，我们先不设置图片的 src 属性，将图片的真实路径放到一个浏览器不认识的属性中（比如 data-src），然后我们去监听 scroll 事件。当页面的 scrollTop 与浏览器的高度之和大于图片距页面顶端的 Y (注意是整个页面不是浏览器窗口)时，说明图片已经进入可视区域，这是把 data-src 的值放到 src 中即可。
为什么要使用懒加载？
对于大多数用户，特别是移动端和网速比较的用户，如果首屏加载过多的图片，页面将会加载得很慢而且浪费用户的流量。
Javascript 脚步通常要等到 DOM 加载完后才会执行，如果加载的资源过多，可能会影响网页的正常使用。
能够节省流量和减轻服务器压力，更近一步就是能够为公司省成本。
关于如何实现本文不做过多阐述，成熟的方案社区比比皆是。这边推荐几个比较好用的轮子。
1、Lozad.js
2、laytpl.js
雪碧图，CSS Sprites，国内也叫 CSS 精灵，是一种 CSS 图像合成技术，主要用于小图片显示
在网页中，为了更好的展现效果，经常会采用一些小图标来替代文字。常用的方式包括 Icon Fonts、SVG Icons、小图片，其中 Icon Fonts 只支持单色，SVG Icons 需 IE9+。
如果采用小图片，需要考虑一个问题：每张小图片独立请求，加载时都会产生一个 HTTP 请求，而小图片体积（1 ~ 2 kb）就比较小，对比上 HTTP 请求连接、请求头内容、响应等的开销，就显得非常没必要了，那有没有可能将多张小图片合并成一张图？
使用 iconfont
iconfont 译为字体图标，即通过字体的方式展示图标，多用于渲染图标、简单图形、特殊字体等。
使用 iconfont 时，由于只需要引入对应的字体文件，针对加载图片张数较多的情况，可有效减少 HTTP 请求次数，而且一般字体体积较小，所以请求传输数据量较少。与直接引入图片不同，iconfont 可以像使用字体一样，设置大小和颜色，还可以通过 CSS 设置特殊样式，且因为其是矢量图，不存在失真的情况
网友评论