图片的懒加载，预加载，色彩预制加载

什么是懒加载？

懒加载就是延迟加载，也就是lazyload。只有当图片出现在浏览器的可视区域时才加载该图片，让图片显示出来，这就是图片的懒加载。

为什么要使用懒加载呢？

因为有时候一个页面里面有很多张图片，并且图片比较大。如果我们加载该页面的时候，就一次性加载完，那么页面会得等待较长时间才能显示，影响用户体验。

懒加载的原理？

懒加载就是把img的src属性值先设置为其他占位图片，把真正的路径存在与一个自定义属性上，如‘data-src’。然后等到页面滚动到该图片的位置的时候，再给src属性赋正确的值。

1. 在src里设置占位图片，在data-src里设置正确的图片路径。
2. 页面加载完成后，根据scrollTop来判断图片是否出现在用户的视野中，也就是出现在浏览器的可视区域中，然后再把data-src中的值取出来赋给src。

懒加载的优点

页面加载速度快，减轻服务器的压力，节约了流量成本，用户体验好。

预加载

什么是预加载？

就是提前加载出来图片，当用户需要查看的时候就可以直接地从本地缓存中来渲染。

为什么要使用预加载？

图片预先加载到浏览器中，那么用户就可以不需等待地浏览页面中地图片了，这对于页面中图片比较多的网站比较好，极大提升了用户体验。

实现预加载的方法？

1， 用CSS和js实现预加载。
2， 只用js来实现预加载。
3， 使用Ajax来实现预加载。

详见： http://web.jobbole.com/86785/

懒加载和预加载的比较？

懒加载是按需加载的，减少了服务器的压力，也加快了首屏的渲染速度，减少了流量成本。
预加载是事先加载完，增大了服务器压力，但是用户浏览的时候更流畅。（这里要说明的是，预加载不是在首屏渲染的时候也同时渲染的，因为这样会影响首屏渲染速度。它是在首屏渲染结束之后，才开始预加载的）

插件的选择：

懒加载的建议使用
1，layzr.js 轻量级，功能多，不依赖任何库，有cdn。
https://github.com/callmecavs/layzr.js#data-normal
2，lazylaod 基于jquery或zepto的懒加载插件，也是百度团队正在使用的，功能比较齐全，但有依赖。https://github.com/jieyou/lazyload