js圖片預加載的三種方法

預加載基本概念：當頁面打開圖片提前加載，並且緩存在用戶本地，需要用到時直接進行渲染；在瀏覽圖片較多的網頁（百度圖庫，淘寶京東等），可以有更好的用戶體驗；

一張圖片的預加載

 　　　　 var img=new Image();
        img.addEventListener("load",loadHandler);
        img.src="./img/1.jpg";
        document.body.appendChild(img);
        console.log(img.width)；

        function loadHandler(e){
            console.log(img.width);//當前圖片的原始寬度
        }

上面代碼中，圖片還沒加載完成打印圖片的寬度時，圖片寬度為0；只有等圖片加載完成后並寫入DOM樹渲染后，才去觸發load事件的回調函數，才能打印出圖片的寬度；

加載多張圖片時，要提前在本地進行緩存，下面要講三種預加載多張圖片的例子：

第一種：load預加載

加載100張圖片，且圖片名為1.jpg~100.jpg（下同）；

　　　　  var num=1;
        var list=[];
        loadImage();
        function loadImage(){
            var img=new Image();
            img.addEventListener("load",loadHandler);
            img.src="./img/"+num+".jpg";
        }
        function loadHandler(e){
            list.push(this.cloneNode());//復制當前圖片元素
            num++;
            if(num>100){console.log(list);return;}
            this.src="./img/"+num+".jpg"; //修改地址繼續后觸發load事件
        }

上面代碼表示：

　　 1、創建一張圖片；

        2、給這個圖片增加事件偵聽load；

        3、加載完成后,將加載進來的圖片復制一個新的,放在數組中；

        4、修改num；如果num的值大於100停止執行，並且打印數組；

        5、給這個圖片的地址賦予一個新地址,因為改變圖片的地址就會重新觸發load，所以會繼續進入loadHandler函數,不斷加載,直到加載完成。

 

第二種：生成器函數實現預加載

function loadImage(src){
        return new Promise(function(resolve,reject){
            let img=new Image();
            img.onload=function(){ 
                resolve(img);//加載時執行resolve函數
            }
            img.onerror=function(){ 
                reject(src+'這個地址錯誤');//拋出異常時執行reject函數
            }
            img.src=src;
        })
    }
    function* fn(){
        for(let i=1;i<100;i++){
            yield loadImage("./img/"+i+".jpg");
        }
    }
    let s=fn();
    let value=s.next().value; 
    resume();
    function resume(){
        value.then(img=>{
            console.log(img);//打印加載的圖片標簽
            value=s.next().value;
            if(value)resume();
        });
    }

以上代碼表示：

　　1、執行生成器函數並且一次執行loadImage 函數；

　　2、在Promise中創建圖片；

　　3、判斷圖片是否可以加載，加載成功執行Promise的回調函數resolve；

　　4、執行一次resume函數，並在函數里面執行Promise在resolved狀態下的函數

　　5、反復執行s.next().value，直到全部圖片加載完成；

第三種：async/await預加載圖片

function loadImage(src){
        let p=new Promise(function(resolve,reject){
            let img=new Image();
            img.onload=function(){//加載時執行resolve函數
                resolve(img);
            }
            img.onerror=function(){
                reject(src);
            }
            img.src=src;
        })
        return p;
    }
    async function fn(){
        let arr=[];
        for(let i=3;i<80;i++){
            await loadImage(`./img/${i}-.jpg`).then(img=>{
                arr.push(img);
            });
        }
        return arr;
    }
    fn().then(list=>{
        console.log(list);//打印圖片數組
    })

這種方法是ES6的方法用到了async和await將異步轉換為阻塞式同步；

說明：

1、fn 這個函數使用async 表示這個函數是一個異步函數

2、這個函數中就可以使用await ，await作用就是讓異步變為同步等待，異步變成了阻塞式等待

3、當異步全部完成時，再繼續向后運行

4、async函數中的await后面只能跟的時Promise對象

5、async函數執行后返回的是一個Promise對象

以上就是三種預加載的方法，僅供參考；