成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

延遲加載圖片

longmon / 2362人閱讀

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

首先有一個(gè)問題

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

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

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

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

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

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

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

第二個(gè)問題在于節(jié)流，總不能每滑動(dòng)一下都執(zhí)行一遍。有兩個(gè)實(shí)現(xiàn)。同步和異步的方式各實(shí)現(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);

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88145.html

相關(guān)文章

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

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

    ghnor 評(píng)論0 收藏0

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

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

    niuxiaowei111 評(píng)論0 收藏0

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

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

    luckyw 評(píng)論0 收藏0

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

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

    cuieney 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<