jquery的懶加載記錄一下踩得坑

官網下載地址:http://plugins.jquery.com/lazyload/html

要引入兩個文件,注意這些事html中包含着jquery

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.lazyload.js"></script>code

而後在query.lazyload.js下面配置一下你用到的htm

<script>
     $(function(){
      $("img.lazy").lazyload({
     placeholder:"./img/loading.gif",    //圖片未加載出來時顯示的佔位圖
     effect:"show",          //展示的方式,經常使用:show顯示\fadeIn閃現
     threshold:100,      //在距離屏幕多少px時開始加載
     event:"scroll",        //懶加載的觸發事件,經常使用:click點擊/mouseover鼠標移入/sporty運動/默認爲scroll滑動
     container:$("#J-sourceList"),   //指定容器內的元素產生效果
     failure_limit:5                //加載多少張可見區域外的圖片
    });
     })
  </script>seo

而後建議img的尺寸儘可能統一 那樣直接寫一個class完美,由於這個我發現須要給img配置width height不給的話有可能會不加載事件

相關文章
相關標籤/搜索