JQuery图片延迟加载

<p>现在很多图片量大的网站都采用了一种技术，让打开的网页只显示一部分图片，当浏览者需要浏览后面的图片，拖动滚动条，图片进入可是区域后，才加载图片。这种方法大大的减少了网页打开的时间。淘宝等网站都使用了这种方法。</p>
<p>图片延迟加载</p>
<p>现在的网站一般都有用到jquery，在做图片延迟加载时，我们在jquery基础上，使用lazyload.js图片延迟加载插件就行。</p>
<p>具体操作 如下：</p>

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.lazyload.js”></script>
<style type=”text/css”>
.main{width:215px;height:auto;margin:0 auto}
.main ul{margin:0;padding:0;}
.main li{list-style:none;width:213px;height:198px;margin-top:10px;border:1px #000 solid}
</style>
<script type=”text/javascript”>
$(function() {
$(“.main img”).lazyload({
placeholder : “images/grey.gif”,   /*默认替换图片*/
effect:”fadeIn”,                                     /*显示方式*/
failurelimit : 30
})
});
</script>
<div class=”main”>
<ul>
<li><img src=”images/1.png” /></li>                  <!–默认显示的图片–>
<li><img original=”images/1 (6).png” /></li>  <!–按需求延迟加载的图片，把img的src改为original，阻止默认加载。–>
</ul>
</div>