懶載入技術(簡稱lazyload)並不是新技術, 它是js程式員對網頁性能優化的一種方案.lazyload的核心是按需載入 涉及到圖片，falsh資源 , iframe, 網頁編輯器(類似FCK)等占用較大帶寬，且這些模塊暫且不在瀏覽器可視區內,因此可以使用lazyload在適當的時候載入該類資源. ...
懶載入技術(簡稱lazyload)並不是新技術, 它是js程式員對網頁性能優化的一種方案.lazyload的核心是按需載入
涉及到圖片，falsh資源 , iframe, 網頁編輯器(類似FCK)等占用較大帶寬，且這些模塊暫且不在瀏覽器可視區內,因此可以使用lazyload在適當的時候載入該類資源.避免網頁打開時載入過多資源，讓用戶等待太久，
來，舉個慄子，當你去東哥的綠帽網網購的時候，打開首頁的時候，直接在導航欄選了商品種類跳轉到了列表頁，那首頁下方那些未顯示的區域的圖片需不需要載入，當然不需要了，你根本沒看他們，載入出來幹啥
說白了就是占著茅坑不拉粑粑，那我們怎麼解決呢，這時我們就該用到懶載入技術，只有當這部分圖片出現在可視區內再去請求伺服器。
懶載入的核心：在如何在適當的時候載入用戶需要的資源(這裡用戶需要的資源指該資源呈現在瀏覽器可視區域)
下麵來一個大慄子
來，把朕的代碼例子呈上來
例子的思路：頁面渲染時將src路徑放到自定義屬性中去，這樣頁面載入時圖片就不會去請求伺服器，當圖片滾動到可視區內時，獲取它的自定義屬性並賦值給src
這是頁面的佈局，圖片路徑註意改一下子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} img{ width: 200px; height: 200px; display: block; float: left; } </style> </head> <body> <img src="" data-url ="img/1.jpg"> <img src="" data-url ="img/2.jpg"> <img src="" data-url ="img/3.jpg"> <img src="" data-url ="img/4.jpg"> <img src="" data-url ="img/5.jpg"> <img src="" data-url ="img/6.jpg"> <img src="" data-url ="img/7.jpg"> <img src="" data-url ="img/8.jpg"> <img src="" data-url ="img/9.jpg"> <img src="" data-url ="img/10.jpg"> <img src="" data-url ="img/1.jpg"> <img src="" data-url ="img/2.jpg"> <img src="" data-url ="img/3.jpg"> <img src="" data-url ="img/4.jpg"> <img src="" data-url ="img/5.jpg"> <img src="" data-url ="img/6.jpg"> <img src="" data-url ="img/7.jpg"> <img src="" data-url ="img/8.jpg"> <img src="" data-url ="img/9.jpg"> <img src="" data-url ="img/10.jpg"> <img src="" data-url ="img/1.jpg"> <img src="" data-url ="img/2.jpg"> <img src="" data-url ="img/3.jpg"> <img src="" data-url ="img/4.jpg"> <img src="" data-url ="img/5.jpg"> <img src="" data-url ="img/6.jpg"> <img src="" data-url ="img/7.jpg"> <img src="" data-url ="img/8.jpg"> <img src="" data-url ="img/9.jpg"> <img src="" data-url ="img/10.jpg"> <img src="" data-url ="img/1.jpg"> <img src="" data-url ="img/2.jpg"> <img src="" data-url ="img/3.jpg"> <img src="" data-url ="img/4.jpg"> <img src="" data-url ="img/5.jpg"> <img src="" data-url ="img/6.jpg"> <img src="" data-url ="img/7.jpg"> <img src="" data-url ="img/8.jpg"> <img src="" data-url ="img/9.jpg"> <img src="" data-url ="img/10.jpg">
來 上關鍵的JS代碼
<script>
//頁面載入時先調用一次loadImg函數
loadImg()
//添加滾動事件
window.onscroll = function () {
loadImg()
}
function loadImg() {
var iH = document.documentElement.clientHeight;
var t = document.documentElement.scrollTop || document.body.scrollTop;
var img = document.getElementsByTagName("img");
for (var i = 0; i < img.length; i++) {
if ((!img[i].bstop) && offsetTop1(img[i]) < (iH + t)) {
//註意 真正在頁面上使用一定要加開關,不加開關每次條件符合時都會重新請求伺服器，還不如不用懶載入
//理解不了啥意思的同學，可以把img[i].bstop刪去試試
//同時不要用offsetTop
//因為offsetTop是獲取離已定位的父元素的top值
//所以自己封裝一個計算offsetTop的函數
var src = img[i].getAttribute("data-url");
img[i].src = src;
img[i].bstop = true;
console.log(1)
}
}
}
//封裝獲取元素離上方的高度的函數
function offsetTop1(obj) {
var t = obj.offsetTop;
while (obj.offsetparent) {
obj = obj.offsetparent;
t = t + obj.offsetTop;
}
return t;
}
</script>
