圖片延遲載入外掛lazyload使用
阿新 • • 發佈:2018-12-11
lazyload簡介:懶載入,當滾動到圖片位置時,在載入圖片
這裡我用到的是1.9.7版本,cdn地址如下:
<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
使用方法:
引用jquery和jquery.lazyload.js到你的頁面
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
html圖片呼叫方法
為圖片加入樣式lazy 圖片路徑引用方法用data-original
<img class="lazy" data-original="1.jpg"> <img class="lazy" data-original="2.jpg"> <img class="lazy" data-original="3.jpg"> <img class="lazy" data-original="4.jpg"> <img class="lazy" data-original="5.jpg"> <img class="lazy" data-original="6.jpg">
js出始化lazyload並設定圖片顯示方式
$(function(){
$('img.lazy').lazyload({
effect:"fadeIn",
//threshold:180, //在圖片距離螢幕180px時提前載入
});
});
可選引數
$("img.lazy").lazyload({ placeholder : "img/grey.gif", //用圖片提前佔位 // placeholder,值為某一圖片路徑.此圖片用來佔據將要載入的圖片的位置,待圖片載入時,佔位圖則會隱藏 effect: "fadeIn", // 載入使用何種效果 // effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn threshold: 200, // 提前開始載入 // threshold,值為數字,代表頁面高度.如設定為200,表示滾動條在離目標位置還有200的高度時就開始載入圖片,可以做到不讓使用者察覺 event: 'click', // 事件觸發時才載入 // event,值有click(點選),mouseover(滑鼠劃過),sporty(運動的),foobar(…).可以實現滑鼠莫過或點選圖片才開始載入,後兩個值未測試… container: $("#container"), // 對某容器中的圖片實現效果 // container,值為某容器.lazyload預設在拉動瀏覽器滾動條時生效,這個引數可以讓你在拉動某DIV的滾動條時依次載入其中的圖片 failurelimit : 10 // 圖片排序混亂時 // failurelimit,值為數字.lazyload預設在找到第一張不在可見區域裡的圖片時則不再繼續載入,但當HTML容器混亂的時候可能出現可見區域內圖片並沒加載出來的情況,failurelimit意在載入N張可見區域外的圖片,以避免出現這個問題. });