jquery 延迟加载代码

浏览数：43 / 时间：2015年06月09日

 <!--引入以下两个js文件-->
 <script type="text/javascript" src="./js/jquery.min.js"> </script>
 <script type="text/javascript" src="./js/jquery.lazyload.js"> </script>

 <!--初始化-->
 <script>
 $(function(){
     
         // 在灰色占位图片被点击之前阻止加载图片
     $("img.lazy").lazyload({
        placeholder : "img/grey.gif",
        event : "click"
    });
        
     $("ul img").lazyload({
         placeholder :"vsli1.gif",
         //当图片完全加载的时候, 插件默认地使用 show() 方法来将图显示出来. 其实你可以使用任何你想用的特效来处理
         effect : "fadeIn",
         threshold : 10      
     }); 

});


 </script>



<body>
<img class="lazy" src="./image/1.jpg"  width="100" heigh="100" />
<ul>
       <li><img src="./image/1.jpg" ></li>
       <li><img src="./image/11.jpg" ></li>
       <li><img src="./image/1.jpg" ></li>
       <li><img src="./image/11.jpg" ></li>
       <li><img src="./image/1.jpg" ></li>
       <li><img src="./image/11.jpg" ></li>
       <li><img src="./image/1.jpg" ></li>
       <li><img src="./image/11.jpg" ></li>
       <li><img src="./images/1.jpg" ></li>
       <li><img src="./images/11.jpg" ></li>
        <li><img src="./image/1.jpg" ></li>
       <li><img src="./image/11.jpg" ></li>
       <li><img src="./image/1.jpg" ></li>
       <li><img src="./image/11.jpg" ></li>
       <li><img src="./image/1.jpg" ></li>
       <li><img src="./image/11.jpg" ></li>
       <li><img src="./image/1.jpg" ></li>
       <li><img src="./image/11.jpg" ></li>
       <li><img src="./images/1.jpg" ></li>
       <li><img src="./images/11.jpg" ></li>
</ul>
</body>