基于jquery懒加载的经验总结

基于jquery懒加载的经验总结

本次通过jquery实现了懒加载，为啥要懒加载呢，它是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

使用方法

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

$(document).ready(function(){
    $("img").lazyload({
        placeholder:"loading.jpg",    //鍥剧墖鏈姞杞藉嚭鏉ユ椂鏄剧ず鐨勫崰浣嶅浘
        effect:"show",          //灞曠幇鐨勬柟寮�,甯哥敤锛歴how鏄剧ず\fadeIn闂幇
        threshold:180,      //鍦ㄨ窛绂诲睆骞曞灏憄x鏃跺紑濮嬪姞杞�
        event:"scroll",        //鎳掑姞杞界殑瑙﹀彂浜嬩欢,甯哥敤锛歝lick鐐瑰嚮/mouseover榧犳爣绉诲叆/sporty杩愬姩/榛樿涓簊croll婊戝姩
        failure_limit:12                //鍔犺浇澶氬皯寮犲彲瑙佸尯鍩熷鐨勫浘鐗�
    })

最后在img标签
中，把<img src="/dedemao/images/weigang.png">改成 <img data-original="/dedemao/images/weigang.png">
就能实现懒加载了。