修改目标 img 的 src 属性为 orginal 属性，从而中断图片的加载。检测滚动状态，然后把可视网页中的 img 的 src 属性还原加载图片，制造缓冲加载的效果。

但是现在，很多javascript大牛分析得出，这个插件其实并没有真正的缓加载效果。确实是这样，官方也已经给出了说明和解决方法了。

问题原因：在新版的浏览器中，即使你删除了 Javascript 控制的 src 属性，浏览器仍然会去加载这个图像。

解决方法：直接修改 HTML 的结构，在 img 标签中添加新的属性，把 src 属性的值指向占位图片，添加 data-original 属性，让其指向真正的图像地址。

例如:

<img data-original="img/banner.jpg" src="img/loading.gif">

上代码：

html页面代码

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="lazyload.js"></script>

<img class="lazlazyloady" src="banner1.png" data-original="loading.gif" width="640" heigh="480">
<img class="lazlazyloady" src="banner2.png" data-original="loading.gif" width="640" heigh="480">
<img class="lazlazyloady" src="banner3.png" data-original="loading.gif" width="640" heigh="480">
<img class="lazlazyloady" src="banner4.png" data-original="loading.gif" width="640" heigh="480">
<img class="lazlazyloady" src="banner5.png" data-original="loading.gif" width="640" heigh="480">
<img class="lazlazyloady" src="banner6.png" data-original="loading.gif" width="640" heigh="480">
<img class="lazlazyloady" src="banner7.png" data-original="loading.gif" width="640" heigh="480">
<img class="lazlazyloady" src="banner8.png" data-original="loading.gif" width="640" heigh="480">
<img class="lazlazyloady" src="banner9.png" data-original="loading.gif" width="640" heigh="480">

<script type="text/javascript">
$(function() {
$("img.lazlazyloady").lazyload();
});
</script>

上面的JS核心文件可以在线引用，也可以下载到自己服务器，在线JS引用各版本大全

jQuery 所有常用版本在线引用

lazyload.js下载