码迷,mamicode.com
首页 > Web开发 > 详细

jquery 延迟加载代码

时间:2015-01-16 16:02:41      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:

 <!--引入以下两个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>

 

jquery 延迟加载代码

标签:

原文地址:http://www.cnblogs.com/a757956132/p/4228604.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!