亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

延遲加載圖片

longmon / 2428人閱讀

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

首先有一個問題

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

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

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

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

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

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

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

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

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...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/88145.html

相關(guān)文章

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

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

    ghnor 評論0 收藏0

  • 延遲加載(Lazyload)三種實現(xiàn)方式

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

    niuxiaowei111 評論0 收藏0

  • Chrome 75 將原生支持圖片的惰性加載

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

    luckyw 評論0 收藏0

  • Javascript設(shè)計模式之——代理模式

    摘要：最近在讀設(shè)計模式與開發(fā)實踐，在這里把文中的各種設(shè)計模式寫出來，以便加深記憶，也可以分享給初學(xué)者。經(jīng)紀(jì)人可以全權(quán)代表明星和客戶談判，最后把談判結(jié)果給明星，明星決定簽約與否。這也違反了面向?qū)ο笤O(shè)計原則中的單一職責(zé)原則。 最近在讀《javascript設(shè)計模式與開發(fā)實踐》，在這里把文中的各種設(shè)計模式寫出來，以便加深記憶，也可以分享給初學(xué)者。如果你不了解設(shè)計模式，那么強烈推薦你閱讀一下這本書，...

    cuieney 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<