延遲加載圖片

longmon 發布于2019-08-21 15:18 / 2353人閱讀

摘要：只是一個空標簽，內容由定義，瀏覽器會暫停加載，直到獲取和加載完圖像。先不給標簽加上，直到瀏覽到了這個位置再加載。第一個問題在于獲取圖片距離可見范圍下邊的距離。從而得到距離視圖下方的高度。

首先有一個問題

src和href屬性都用來包含一些外部的實體，那么有什么區別？

src：source用于替代元素（replaced elements簡而言之，就是外觀和尺寸由外部資源來定義，有img，button，textarea，input，select，object）。
href：Hypertext Reference，指定了web資源的定位。因此定義了一個連接或者現在元素之間的關系（比如錨和目的地），或者是當前文檔（比如link標簽）和屬性定位的資源間的關系。
所以我們這樣寫

瀏覽器就能夠理解這是一個樣式表，而且解析（parse）頁面的時候不會中斷（但是可能因為瀏覽器需要依據樣式來繪制渲染界面而中斷渲染render）。跟把所有css文件倒到style標簽不一樣。因此也建議用link，不要用 @import來導樣式表。

src屬性只是在當前的文本元素定義的地方嵌套了一個資源。
例如當瀏覽器看到

頁面的下載和處理會被終止，直到瀏覽器獲取，編譯，執行了文件。類似于把所有的js文件都傾倒在script標簽里。img標簽也是類似的。只是一個空標簽，內容由src定義，瀏覽器會暫停加載，直到獲取和加載完圖像。
這也是為什么要把js文件放在body的最后的原因。
參考來自http://stackoverflow.com/ques...

想到了一個有意思的實現。
先不給img標簽加上src，直到瀏覽到了這個位置再加載。對于移動端，還能省流量。

所以來實現一下。
第一個問題在于獲取圖片距離可見范圍下邊的距離。
幾個尺寸屬性參考http://www.jianshu.com/p/187c...
先獲取元素距離上邊的距離，再獲取屏幕可用高度，以及滑動高度。
從而得到距離視圖下方的高度。

第二個問題在于節流，總不能每滑動一下都執行一遍。有兩個實現。同步和異步的方式各實現了。

handleScroll=(callback)=>{
        let previousCall=new Date().getTime();
        return (e=>{
            let diff=new Date().getTime()-previousCall
            if(diff>INTERVAL){
                callback.apply(null,arguments);
                previousCall=new Date().getTime();
            }
        })
    }
window.addEventListener("scroll",handleScroll(checkImgs));
//或者
let wait=false;
ontimeLoad=(e)=>{
    if(!wait){
      wait=true;
      setTimeout(function(){
        wait=false;
        checkImgs();
      },10);
    }
}
window.addEventListener("scroll",ontimeLoad);

不過第一種的話有個問題，就是不能removeEventListener了

源碼：
https://github.com/zxf14/font...

GPU云服務器云服務器延遲加載圖片延遲加載延遲加載技術 javascript延遲加載

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

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

圖像延遲加載 && 列表圖順序加載

摘要：此外，跟蹤尚未延遲加載的元素數量，以及取消綁定滾動事件處理程序的繁瑣工作將由開發者來完成。圖像延遲加載列表圖順序加載的組件已經開源啦有興趣的同學可以查看使用起來非常簡單圖片延時加載十分重要，尤其是對于移動端用戶。從理論上來看，圖像延遲加載機制十分簡單，但實際上卻有很多需要注意的細節。此外，有多個不同的用例均受益于延遲加載。首先，我們來了解一下在 HTML 中延遲加載內聯圖像。延遲加載...

ghnor 2019-05-23 17:33 評論0 收藏0
延遲加載(Lazyload)三種實現方式

摘要：原文鏈接延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。傳入一個回調函數，當其觀察到元素集合出現時候，則會執行該函數。管理的是一個數組，當元素出現或消失的時候，數組添加或刪除該元素，并且執行該回調函數。原文鏈接 - https://zhuanlan.zhihu.com/p/25455672 延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。...

niuxiaowei111 2019-08-21 15:18 評論0 收藏0
Chrome 75 將原生支持圖片的惰性加載

摘要：今天給大家帶來好消息是，將原生支持圖片的惰性加載，支持對和進行延遲加載，只需要將屬性設置為即可。該屬性支持標簽，無論標簽是否含有屬性及被標簽包裹，以及標簽。隨著瀏覽器性能的提升，前端也越來越關注用戶體驗，而影響用戶體驗其中一個很重要的指標便是受首屏渲染速度。我們常常會針對樣式、腳本、圖片、音頻、視頻等資源做處理，比如針對樣式和腳本的壓縮合并，將圖片合并成雪碧圖、將小圖轉化成base6...

luckyw 2019-08-23 16:54 評論0 收藏0
Javascript設計模式之——代理模式

摘要：最近在讀設計模式與開發實踐，在這里把文中的各種設計模式寫出來，以便加深記憶，也可以分享給初學者。經紀人可以全權代表明星和客戶談判，最后把談判結果給明星，明星決定簽約與否。這也違反了面向對象設計原則中的單一職責原則。最近在讀《javascript設計模式與開發實踐》，在這里把文中的各種設計模式寫出來，以便加深記憶，也可以分享給初學者。如果你不了解設計模式，那么強烈推薦你閱讀一下這本書，...

cuieney 2019-08-20 17:07 評論0 收藏0