NO IMAGE

懶載入的原理

  • 原理:先將img標籤中的src連結設為同一張圖片(空白圖片),將其真正的圖片地址儲存再img標籤的自定義屬性中(比如data-src)。當js監聽到該圖片元素進入可視視窗時,即將自定義屬性中的地址儲存到src屬性中,達到懶載入的效果。
  • 這樣做能防止頁面一次性向伺服器響應大量請求導致伺服器響應慢,頁面卡頓或崩潰等問題。

程式碼實現

  • 既然懶載入的原理是基於判斷元素是否出現在視窗可視範圍內,首先我們寫一個函式判斷元素是否出現在可視範圍內:
function isVisible($node){
var winH = $(window).height(),
scrollTop = $(window).scrollTop(),
offSetTop = $(window).offSet().top;
if (offSetTop < winH   scrollTop) {
return true;
} else {
return false;
}
}
  • 再新增上瀏覽器的事件監聽函式,讓瀏覽器每次滾動就檢查元素是否出現在視窗可視範圍內:
$(window).on("scroll", function{
if (isVisible($node)){
console.log(true);
}
})
  • 我們已經很接近了,現在我們要做的是,讓元素只在第一次被檢查到時列印true,之後就不再列印了
var hasShowed = false;
$(window).on("sroll",function{
if (hasShowed) {
return;
} else {
if (isVisible($node)) {
hasShowed = !hasShowed;
console.log(true);
}
}
})

咦,我們好像已經實現了懶載入。
下面是我的實現:

無限滾動

利用懶載入和AJAX,我們還可以實現無限滾動檢視時間線的效果,下面是我的實現:
展示程式碼

回到頂部

利用懶載入的原理,我們還可以實現在滾動頁面一段距離後,出現回到頂部按鈕的這種效果,下面是我的實現
展示程式碼