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

資訊專(zhuān)欄INFORMATION COLUMN

前端性能優(yōu)化--懶加載和預(yù)加載

loostudy / 558人閱讀

摘要：集合中有等屬性文檔各種高度視口的大小文檔的大小文檔的大小預(yù)加載標(biāo)簽

懶加載 代碼實(shí)現(xiàn) html 




    
    
    
    Document
css 
.image-item {
    display: inline-block;
    width: 100%;
    height: 300px;
    background: gray;
}
js 
        var viewHeight = document.documentElement.clientHeight;

        function lazyload() {
            var imgs = document.querySelectorAll("img[data-original][lazyload]");
            imgs.forEach(item => {

                if (item.dataset.original == "") {
                    return;
                }
                var rect = item.getBoundingClientRect();
                if (rect.bottom >= 0 && rect.top < viewHeight) {
                    var img = new Image();
                    img.src = item.dataset.original;
                    console.log(img.src)
                    img.onload = function() {
                        item.src = img.src;
                    }
                    item.removeAttribute("data-original");
                    item.removeAttribute("lazyload")
                }
            })
        }
        lazyload();
        document.addEventListener("scroll", lazyload)
效果

藍(lán)色為已經(jīng)請(qǐng)求加載的圖片

紅色為還沒(méi)有請(qǐng)求加載的圖片

默認(rèn)打開(kāi)，沒(méi)有操作前

向下滾動(dòng)前

向下滾動(dòng)后

冷門(mén)屬性 ocument.addEventListener（事件監(jiān)聽(tīng)） 
document.addEventListener("scroll", function() {
    console.log("aa")
})

dataset 
用`dataset.original`獲取`data-original` 的屬性
img.onload

事件在圖片加載完成后立即執(zhí)行

getBoundingClientRect

用于獲取某個(gè)元素相對(duì)于視窗的位置集合。集合中有top, right, bottom, left等屬性

文檔各種高度

document.documentElement.clientHeight:視口的大小
document.documentElement.scrollHeight:文檔的大小
document.documentElement.offsetHeight:文檔的大小

預(yù)加載 標(biāo)簽
new Image() 
var image = new Image();
image.src = "https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg";
xml

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

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

相關(guān)文章

  • 懶加載和預(yù)加載

    摘要：使用默認(rèn)是對(duì)象，如果是是指使用標(biāo)簽，可以跨域，三懶加載和預(yù)加載的對(duì)比兩者都是提高頁(yè)面性能有效的辦法，兩者主要區(qū)別是一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對(duì)服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加服務(wù)器前端壓力。 一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

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

  • 懶加載和預(yù)加載

    摘要：使用默認(rèn)是對(duì)象，如果是是指使用標(biāo)簽，可以跨域，三懶加載和預(yù)加載的對(duì)比兩者都是提高頁(yè)面性能有效的辦法，兩者主要區(qū)別是一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對(duì)服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加服務(wù)器前端壓力。 一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

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

  • 懶加載和預(yù)加載

    摘要：使用默認(rèn)是對(duì)象，如果是是指使用標(biāo)簽，可以跨域，三懶加載和預(yù)加載的對(duì)比兩者都是提高頁(yè)面性能有效的辦法，兩者主要區(qū)別是一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對(duì)服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加服務(wù)器前端壓力。 一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

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

  • 前端性能優(yōu)化

    摘要：端優(yōu)談?wù)勱P(guān)于前端的緩存的問(wèn)題我們都知道對(duì)頁(yè)面進(jìn)行緩存能夠有利于減少請(qǐng)求發(fā)送，從而達(dá)到對(duì)頁(yè)面的優(yōu)化。而作為一名有追求的前端，勢(shì)必要力所能及地優(yōu)化我們前端頁(yè)面的性能。這種方式主要解決了淺談前端中的過(guò)早優(yōu)化問(wèn)題過(guò)早優(yōu)化是萬(wàn)惡之源。 優(yōu)化向：?jiǎn)雾?yè)應(yīng)用多路由預(yù)渲染指南 Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應(yīng)用能夠在不刷新的狀態(tài)下顯示不同頁(yè)面的內(nèi)容，這就是單頁(yè)應(yīng)用。在一個(gè)單頁(yè)應(yīng)用中，往往只有一...

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

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

0條評(píng)論

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