1. 懶加載

原理：通過頁面加載開始，先給圖片一個占位圖抒巢，將實際圖片屬性，放在自定義屬性data_url里面秉犹，通過onscroll事件蛉谜，檢測圖片的位置，如果圖片進(jìn)入可視區(qū)域崇堵，將data_url的實際圖片設(shè)置給src
檢測方法：圖片距離文檔頂部距離-scrollTop < 瀏覽器可視區(qū)域高度

2. 延遲加載

 // options
    //  src圖片路徑
    //  loadsrc加載時候的路徑
    //  errsrc 404時候的路徑
    function delayLoadImg(options){
        // 設(shè)置loading圖
        // 如果實參中有l(wèi)oadSrc 則執(zhí)行實參
        // 如果沒有型诚，則執(zhí)行默認(rèn)路徑
        options.imgs.src=options.loadSrc||'./img/loding.gif';
        // 創(chuàng)建一個臨時圖片的images對象
        var img =new Image();
        // 給臨時圖片設(shè)置真實的路徑
        img.src=options.setSrc;
        // 給臨時圖片綁定onload事件
        img.onload=function(){
            // 將真實地址傳給options中的images對象
            options.imgs.src=this.src;
        }
        // 如果加載失敗，綁定onerror
        img.onerror=function(){
            // 配置一張404圖片
            options.imgs.src=options.errSrc||'./img/404.jpeg';
        }
    }

    // 創(chuàng)建圖片對象
    var img=new Image();
    // 調(diào)用預(yù)加載方法鸳劳，實參是一個json
    delayLoadImg({
        imgs:img,
        setSrc:"http://placehold.it/380x300",
        // loadSrc:'',
        // errSrc:'',
    })  

    var box=document.getElementsByClassName('box')[0];
    box.appendChild(img);

3. 圖片對象事件

img.onerror=function(){}圖片對象加載失敗后狰贯，自動調(diào)用
img.onload=function(){}圖片對象加載成功后，自動調(diào)用

4. 資源預(yù)加載

 // 降低服務(wù)器壓力

    // 資源預(yù)加載
    var arrImg = [
        'http://placehold.it/380x300',
        'http://placehold.it/380x300',
        'http://placehold.it/380x300',
        'http://placehold.it/380x300'
    ]
    function preLoad(opctions) {
        // 用來接收所有加載完畢的圖片對象
        var imgObj = [];
        // 保存數(shù)據(jù)長度
        var total = opctions.data.length; 
        // 儲存次數(shù)
        var cont = 0;
        // 遍歷數(shù)據(jù)源赏廓，動態(tài)創(chuàng)建img對象
        for (var i = 0; i < total; i++) {
            var img = new Image();
            img.src = opctions.data[i];
            // 將已經(jīng)數(shù)值好的img添加到imgobj中
            imgObj.push(img);
            img.onload = function () {
                // 計數(shù)器自增
                cont++;
                // 記錄過程
                opctions.each(cont, total);
                // 判斷是否結(jié)束
                if (cont == total) {
                    // 所有圖片加載完畢
                    opctions.success(imgObj);
                }
            }
        }
    }
    preLoad({
        data: arrImg,
        // 記錄圖片加載過程
        each: function (cont, total) {
            console.log(cont, total);
        },
        success: function (res) {
            // 全部加載
            console.log(res);
        },
    })