在图片比较多的页面中，如果一次性把所有的图片全部加载出来，不仅加载速度慢，还会对服务器造成不小的压力，也浪费了带宽（不是每个用户都会从头至尾看完所有页面内容），那么在图片比较多的情况下，我们就可以采取图片懒加载的形式来解决这个问题。
jq中有一个lazyload.js的插件，方便好用，下面简单的介绍一下这个插件的用法
1.lazyload.js是依赖于jq的，所以在使用lazyload插件的时候，必须先引入jq,然后再引入lazyload的这个js
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/lazyload.js"></script>
2.在使用这个插件的时候，img标签的src必须改变成data-original才可以，给img标签取了一个lazy的名字，方便后面给img标签绑定事件，同时，需要给img标签加宽和高的属性才能使懒加载正常运行，不加的话，懒加载是无效的
.lazy{ 100%;height:800px;border:none;}
<img data-original="imgs/1.jpg" alt="" class="lazy">
3.使img标签懒加载，只需加以下代码
$(function() {
$("img.lazy").lazyload(); //叫lazy这个名字的img标签就都被懒加载了 }) 4.可以根据自己的需求来设置怎么触发加载，比如，点击的时候进行加载，也可以使用自定义事件。怎么通过事件让图片加载呢，看下面的代码：
$("img.lazy").lazyload({
event : "click" //只有在点击的时候才会被加载 }); 5.使用特效，比如，图片淡入效果，代码如下
$("img.lazy").lazyload({
effect : "fadeIn" }); 6.插件默认是有占位符的，这个占位符我们也可以给它隐藏掉，只需要以下css代码就可以实现
.lazy {
display: none; } 7.加载隐藏的图片，可能在你的页面上埋藏可很多隐藏的图片. 比如插件用在对列表的筛选, 你可以不断地修改列表中各条目的显示状态. 为了提升性能, Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将
skip_invisible 设为 false$("img.lazy").lazyload({
skip_invisible : false });