之前我们讨论过 图片太大了！ 导致分享和上传时，速度总是很慢的问题~
今天，我们接着讨论图片图片懒加载。这是前端性能优化中老生常谈的话题了。旨在提升页面初始化渲染性能和用户体验。
问题
我们是不是会遇到这样的场景：
当访问一个图片展示比较多的网页时，页面加载速度很慢，尤其是其中的图片半天转不出个所以然来😓
很多时候，这是因为图片多导致的：大量的img图片导致页面渲染的堵塞。
这就出现两个问题：
- 1.当费了许多力气把全部图片和页面加载出来时，用户早已离去(嘴里还念叨“啥破垃圾网站！”)。
- 2.若用户只查看了网页的前面部分便离开，许多已经加载却因为处于网页底部而未呈现在视口区的图片，它们极大加重服务器压力了但是用户看都没看，白白浪费了性能。
因此，网页中图片的处理不可大意，尤其是图片很多的时候！
解决
遥想当年，为了解决这个问题，自己抄起键盘一个劲儿的疯狂输出，最终勉强解决了问题。正在为自己的成就欣喜若狂的时候，发现“图片懒加载”的轮子早就有啦~😓
了不起翻了翻相关的插件！Echo.js是最为简单明了，杠杠的好！这里分享给大家。
Echo.js
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件。Echo.js 不依赖第三方库，压缩后不到1KB大小。
GitHub上翻了下源码，打开一看，共计135行！
Echo.js中，通过计算，当图片元素进入窗口可视区域的时候，它就会改变图像的 src 属性，从服务端加载所需的图片。
Sorry，画图不是我的强项。 但这不影响我们的理解。H1是视窗的高度，H2是img图片距离视窗的距离，可以自定义设置。当img到视窗顶部的距离等于（H1+H2）时，开始加载图片。
这样，图片只有在视窗滚到到临界值（H1+H2）的时候，才开始加载。有效提高网页首屏显示速度，性能和用户体验。
如果小伙伴们也碰到需要对页面图片加载优化的时候，不妨使用这个插件！真的很不错！具体详情，请查看下方链接。
GitHub地址： https://github.com/toddmotto/echo
