图片延时加载LazyLoad真的是LazyLoad吗？

   今天给鬼片电影网在做改版，因为首页大量使用了图片，整个图片列表占据了2-3屏，对于用户和服务器来说，一次性加载这么多的图片都是一件很糟糕的事情，影响用户体验不说，还加大了服务器的鸭梨，实现图片延时加载或者滚动才加载图片，那你肯定会听说过LazyLoad这个Jquery插件了！

首先，我们来看看他官方的使用：

<script src=”/content/js/jquery.min.js”></script>

<script src=”/content/js/jquery.lazyload.js”></script>



<script type=”text/javascript”>

$(document).ready(function(){

$("img").lazyload({

          placeholder : "loading.gif",

          effect : "fadeIn"

    });

});

</script>

   我们得引用Jquery和Lazyload.js这两个脚本，LazyLoad的工作原理是先在<img>下创建original属性，并把src属性值赋值给original，然后再把src的值修改成你设置的 placeholder的值。当滚动条到达图片位置时，再把original的属性赋值给src。这个时候向服务器发出一个HTTP请求，确认下有没有修改，服务器返回一个304状态，等于本来一遍HTTP请求能完成的工作，它用了2遍，非但没有减少开支，还增加开销；

    还有一个方法非常方便的检测是否真的延时加载，打开图片列表的页面，先不要滚动，等待一阵子，然后打开Firebug开发者工具或者其他的网络监控工具，此时滚动页面，留意是否有图片加载的请求，你会发现是没有的，因为图片已经在你等候的那段时间已经加载完了，所以说，这个LazyLoad不是真正的延时加载，而是实现了那样的效果欺骗了你的感情而已。

既然是开源的组件，那么可以为我所用，且看我怎么优化代码，劝浪子回头：

   打开LazyLoad的脚本，找到红色框的部分，第一处注视掉，第二处为增加的代码。然后页面上图片的写法也有所改变；

原来的写法是：<img src=”A.jpg” />

现在修改为这：<img original=”A.jpg”  src=”loading.gif” />

现在，你再用刚才那个方法试试看，实现了真正的延时加载，而不仅仅是效果。

dotnetgeek（这个是我除了博客园外同步更新的博客） 提供已经修改好的源码，亲测可用：百度网盘下载地址