在学习vue的时候了解到图片有懒加载这一说法，自己实践之后做记录。至少现在自己没有遇到这种需求。
这个可以在图片非常多的时候选择懒加载。电商网站应该有需求。
这些插件在jquery插件库也都可以找到。
1. Echo.js实现懒加载
Echo.js 不依赖于 jQuery 或其他 JavaScript 库，可独立使用。并且 Echo.js 非常小巧，压缩后不足 1KB。
Echo.js 使用了 HTML5 的 date 属性，并且需要获取该属性的值，所以它并不兼容 IE6、IE7。虽然 Lazy Load 也使用了 HTML5 的 date 属性，但它获取值的方法不一样。
使用方法如下：
1.引入JS文件
<script src="js/echo.min.js"></script>
2.html中
<img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
blank.gif 是一个 1 x 1 的图片，用做默认图片，data-echo 的属性值是图片的真实地址。同样最好给图片设置宽度和高度，或者在 CSS 中设置也可以，否则似乎很底部很底部的图片才会延迟加载。
3.JavaScript
Echo.init({ offset: 0, throttle: 0 });
offset： 离可视区域多少像素的图片可以被加载
throttle： 图片延迟多少毫秒加载
例如：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>简单的JavaScript图像延迟加载库Echo.js</title> <style> .demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat; } </style> </head> <body> <div class="demo" style=" 736px; margin: 0 auto;"> <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-2.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-3.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-4.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-5.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-6.jpg"> <img class="lazy" src="images/blank.gif" data-echo="images/big-7.jpg"> </div> <script src="js/echo.min.js"></script> <script> Echo.init({ offset: 0, throttle: 0 }); </script> </body> </html>
如果想实现3s后加载，JS修改为：
Echo.init({ offset: 0, throttle: 3000 });
2.jquery.lazyload.js实现懒加载
1.引入相关js
<script src="jquery-1.11.0.min.js"></script> <script src="jquery.lazyload.js?v=1.9.1"></script>
2.界面：
为图片加入样式lazy 图片路径引用方法用data-original
<img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
3.js出始化lazyload并设置图片显示方式
<script type="text/javascript" charset="utf-8"> $(function() { $("img.lazy").lazyload({ effect: "fadeIn" }); }); </script>
其参数如下：
$("img.lazy").lazyload({
placeholder : "img/grey.gif", //用图片提前占位
// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
effect: "fadeIn", // 载入使用何种效果
// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold: 200, // 提前开始加载
// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
event: 'click', // 事件触发时才加载
// event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
container: $("#container"), // 对某容器中的图片实现效果
// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
failurelimit : 10 // 图片排序混乱时
// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});
例如：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Lazy Load Enabled</title> </head> <body> <img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"> <img class="lazy" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"> <img class="lazy" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"> <img class="lazy" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"> <img class="lazy" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"> <img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"> <script src="jquery-1.11.0.min.js"></script> <script src="jquery.lazyload.js?v=1.9.1"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("img.lazy").lazyload({ effect: "fadeIn" }); }); </script> </body> </html>
根据开发者工具的network栏也可以看到发出请求的时间。