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張可見區域外的圖片,以避免出現這個問題.
});