懶加載的原理
原理：先將img標(biāo)簽中的src鏈接設(shè)為同一張圖片（空白圖片），將其真正的圖片地址存儲(chǔ)再img標(biāo)簽的自定義屬性中（比如data-src）。當(dāng)js監(jiān)聽到該圖片元素進(jìn)入可視窗口時(shí)沃呢，即將自定義屬性中的地址存儲(chǔ)到src屬性中，達(dá)到懶加載的效果件舵。
這樣做能防止頁面一次性向服務(wù)器響應(yīng)大量請求導(dǎo)致服務(wù)器響應(yīng)慢颤练，頁面卡頓或崩潰等問題。
代碼實(shí)現(xiàn)
既然懶加載的原理是基于判斷元素是否出現(xiàn)在窗口可視范圍內(nèi)柠座，首先我們寫一個(gè)函數(shù)判斷元素是否出現(xiàn)在可視范圍內(nèi)：
function isVisible($node){ var winH = $(window).height(), scrollTop = $(window).scrollTop(), offSetTop = $(window).offSet().top; if (offSetTop < winH + scrollTop) { return true; } else { return false; }}
再添加上瀏覽器的事件監(jiān)聽函數(shù)邑雅，讓瀏覽器每次滾動(dòng)就檢查元素是否出現(xiàn)在窗口可視范圍內(nèi)：
$(window).on("scroll", function{ if (isVisible($node)){ console.log(true); }})
我們已經(jīng)很接近了，現(xiàn)在我們要做的是妈经，讓元素只在第一次被檢查到時(shí)打印true淮野，之后就不再打印了
var hasShowed = false;$(window).on("sroll",function{ if (hasShowed) { return; } else { if (isVisible($node)) { hasShowed = !hasShowed; console.log(true); } }})
咦捧书，我們好像已經(jīng)實(shí)現(xiàn)了懶加載。 下面是我的實(shí)現(xiàn)：
展示骤星、代碼
無限滾動(dòng)
利用懶加載和AJAX经瓷，我們還可以實(shí)現(xiàn)無限滾動(dòng)查看時(shí)間線的效果，下面是我的實(shí)現(xiàn)： - 展示洞难、代碼
回到頂部
利用懶加載的原理舆吮，我們還可以實(shí)現(xiàn)在滾動(dòng)頁面一段距離后，出現(xiàn)回到頂部按鈕的這種效果廊营，下面是我的實(shí)現(xiàn) - 展示歪泳、代碼
