<!--引入以下两个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>
原文：http://www.cnblogs.com/a757956132/p/4228604.html