雞西網站建設制作優化設計[SEO]
本頁定位
在線咨詢

懶加載和預加載實現解析

假裝紳士??1年前 (2018-09-08)1752A+A-

提到前端性能優化中圖片資源的優化,懶加載和預加載就不能不說,下面我用最簡潔明了的語言,說明懶加載和預加載的核心要點以及實現。

1.懶加載

懶加載的要點如下:
1.圖片進入可視區域之后請求圖片資源;

2.對于電商等圖片較多,頁面很長的業務場景很適用;

3.可以減少無效資源的加載;

4.并發加載的資源過多會阻塞js的加載,影響網站的正常使用;

如何實現懶加載呢?要點就是html中img標簽src屬性為空,或者可以設置一個加載中的友好提示,給一個data屬性,里面存放圖片真實地址,在需要的時候,動態的將這個地址賦予圖片src屬性。例如可以使用lazyload.js做到在距離圖片xxpx的時候進行替換圖片真實地址。

如下所示:

<img src="loading.png" class="image-item" lazyload="true" data-original="http://cdn.7vnet.com/wp-content/uploads/2018/09/js.png" />

類似上述代碼所示,當需要時間,用js腳本控制圖片的加載:

var viewHeight = document.documentElement.clientHeight // 可視區域的高度

function lazyload () {
    // 獲取所有要進行懶加載的圖片
    var eles = document.querySelectorAll('img[data-original][lazyload]')
    Array.prototype.forEach.call(eles, function (item, index) {
        var rect
        if (item.dataset.original === '')
        return
        rect = item.getBoundingClientRect()
        // 圖片一進入可視區,動態加載
        if (rect.bottom >= 0 && rect.top < viewHeight) {
            !function () {
                var img = new Image()
                img.src = item.dataset.original
                img.onload = function () {
                    item.src = img.src
                }
                item.removeAttribute('data-original')
                item.removeAttribute('lazyload')
            }()
        }
    })
}
// 首屏要人為的調用,否則剛進入頁面不顯示圖片
lazyload()

document.addEventListener('scroll', lazyload)

2.預加載

預加載的核心要點如下:

1.圖片等靜態資源在使用之前的提前請求;

2.資源后續使用時可以從緩存中加載,提升用戶體驗;

3.頁面展示的依賴關系維護(必需的資源加載完才可以展示頁面,防止白屏等);

實現預加載主要有三個方法:

1.html中img標簽最初設置為display:none;

2.js腳本中使用image對象動態創建好圖片;

3.使用XMLHttpRequest對象可以更加精細的控制預加載過程,缺點是無法跨域:

var xmlhttprequest = new XMLHttpRequest();
xmlhttprequest.open("GET",src,true);
全部評論: 0
登錄沒有賬號 切換注冊

忘記密碼 ?

注冊已有賬號 切換登錄

15选5走势图开奖