<strike id="gy0ce"></strike>

<del id="gy0ce"></del>

首屏優化圖片懶加載

JohnLui 發布于2019-08-23 13:54 / 2393人閱讀

圖片懶加載有幾個重要的點:

1. 圖片的src放到其他屬性上，加統一的類名，供選擇和加樣式，比如:

2. js懶加載函數

有幾個重點:

獲取可視區域的高度,ie9+ 用window.innerHeight

viewHeight = window.innerHeight || window.documentElement.clientHeight

獲取當前元素距離可視區域頂部的高度用 getBoundingClientRect().top

getBoundingClientRect 和 clientHeight的關系

當getBoundingClientRect().top 小于 viewHeight的時候，給元素的src 賦值

 ele.src = ele.getAttribute("data-src");

最后就是監聽滾動事件了

lazyload完整版

function lazyload() {
    const viewHeight = window.innerHeight || window.documentElement.clientHeight;
    let imgs = document.querySelectorAll(".pic");
    let num = 0, len = imgs.length;
    for(let i = num; i < len; i ++) {
        if(imgs[i].getBoundingClientRect().top < viewHeight) {
            console.log("i", i);
            imgs[i].src = imgs[i].getAttribute("data-src");
            num += 1 ;
        }
    }
}
window.addEventListener("scroll", lazyload);

當然這樣監聽滾動肯定耗費性能，建議加上節流。可參考上一篇文章

GPU云服務器云服務器 js圖片懶加載 js實現數據的懶加載圖片首屏加載懶加載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99764.html

“瀑布流式”圖片懶加載代碼解析及優化(二)

摘要：之前寫過一版圖片懶加載的文章，剛好周末在整理文件的時候，大概又看了一遍之前寫的代碼發現有很多可以優化的地方。這篇文章主要就是結合上篇瀑布流式圖片懶加載代碼示例再來看看圖片懶加載的一些知識。之前寫過一版圖片懶加載的文章，剛好周末在整理文件的時候，大概又看了一遍之前寫的代碼發現有很多可以優化的地方。這篇文章主要就是結合上篇《瀑布流式圖片懶加載代碼示例》再來看看圖片懶加載的一些知識。圖片...

appetizerio 2019-08-19 17:39 評論0 收藏0
一個簡單的圖片懶加載

摘要：一個簡單的圖片懶加載所謂懶加載，是為了提高網頁的打開的速度，獲得更好用戶體驗的一種手段。本文僅僅簡單的舉例圖片的懶加載，是性能優化的入門的篇章，方法比較簡單明了，只要有一點基礎就一定能看懂。一個簡單的圖片懶加載所謂懶加載，是為了提高網頁的打開的速度，獲得更好用戶體驗的一種手段。其選擇的重要的部分先加載，次要的部分需要的時候再加載。比如一個電商網站，首屏通常有很多的數據，清晰度較高的...

RaoMeng 2019-08-02 16:05 評論0 收藏0
一個簡單的圖片懶加載

摘要：一個簡單的圖片懶加載所謂懶加載，是為了提高網頁的打開的速度，獲得更好用戶體驗的一種手段。本文僅僅簡單的舉例圖片的懶加載，是性能優化的入門的篇章，方法比較簡單明了，只要有一點基礎就一定能看懂。一個簡單的圖片懶加載所謂懶加載，是為了提高網頁的打開的速度，獲得更好用戶體驗的一種手段。其選擇的重要的部分先加載，次要的部分需要的時候再加載。比如一個電商網站，首屏通常有很多的數據，清晰度較高的...

ephererid 2019-08-23 11:53 評論0 收藏0