圖片預加載和懶加載的實現方法

時間 2019-11-11

標籤圖片加載實現方法简体版

原文原文鏈接

圖片預加載即提早加載圖片，可保證圖片快速、無縫地發佈，用戶須要查看時可直接從本地緩存中渲染，適用於圖片佔據很大比例的網站。html

方法1,在CSS background中加載：會增長頁面的總體加載時間緩存

#preload-01 { background: url(-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(-02.png) no-repeat -9999px -9999px; }

方法2，JS new image對象，設置src加載：app

function preloader() {
    if (document.images) {
        var img1 = new Image();
        var img2 = new Image();
        var img3 = new Image();
        img1.src = ";;
        img2.src = ";;
        img3.src = ";;
    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {//onload中未掛載函數才執行該JS
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(preloader);
div.appendChild(img1);//插入到DOM

方法3，Ajax預加載,new Image()對象設置src函數

window.onload = function() {
    setTimeout(function() {
        // XHR to request a JS and a CSS
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url;);
        xhr.send();
        xhr = new XMLHttpRequest();
        xhr.open('GET', url;);
        xhr.send();
        // preload image
        new Image().src = ";;
    }, 1000);
};

懶加載：將圖片src賦值爲一張默認圖片，當用戶滾動滾動條到可視區域圖片時候，再去加載真正的圖片網站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazyload 2</title>
    <style>
    img {
        display: block;
        margin-bottom: 50px;
        height: 200px;
    }
    </style>
</head>
<body>
    <img src="images/loading.gif" data-src="images/1.png">
    <img src="images/loading.gif" data-src="images/2.png">
    <img src="images/loading.gif" data-src="images/3.png">
    <img src="images/loading.gif" data-src="images/4.png">
    <img src="images/loading.gif" data-src="images/5.png">
    <img src="images/loading.gif" data-src="images/6.png">
    <img src="images/loading.gif" data-src="images/7.png">
    <img src="images/loading.gif" data-src="images/8.png">
    <img src="images/loading.gif" data-src="images/9.png">
    <img src="images/loading.gif" data-src="images/10.png">
    <img src="images/loading.gif" data-src="images/11.png">
    <img src="images/loading.gif" data-src="images/12.png">
    <script>

    function throttle(fn, delay, atleast) {//函數綁定在 scroll 事件上，當頁面滾動時，避免函數被高頻觸發，
        var timeout = null,//進行去抖處理
        startTime = new Date();
        return function() {
        var curTime = new Date();
        clearTimeout(timeout);
        if(curTime - startTime >= atleast) {
            fn();
            startTime = curTime;
        }else {
            timeout = setTimeout(fn, delay);
        }
        }
    }
    function lazyload() {
        var images = document.getElementsByTagName('img');
        var len    = images.length;
        var n      = 0;      //存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷        
        return function() {
        var seeHeight = document.documentElement.clientHeight;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for(var i = n; i < len; i++) {
            if(images[i].offsetTop < seeHeight + scrollTop) {
                if(images[i].getAttribute('src') === 'images/loading.gif') {
                 images[i].src = images[i].getAttribute('data-src');
                }
            n = n + 1;
             }
        }
        }
    }
    var loadImages = lazyload();
    loadImages();          //初始化首頁的頁面圖片
    window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);　　//函數節流（throttle）與函數去抖（debounce）處理,//500ms 的延遲，和 1000ms 的間隔，當超過 1000ms 未觸發該函數，則當即執行該函數，否則則延遲 500ms 執行該函數
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。