JavaScript预加载

预加载

// 一张图片的预加载
var img=new Image();
img.addEventListener("load",loadHandler);
img.src="./img/3-.jpg";
document.body.appendChild(img);
// offsetWidth内容的宽度
console.log(img.offsetWidth);

function loadHandler(e){
    // 当前图片的原始宽度
    console.log(img.width);
}



// 多张图片加载
for(var i=3;i<80;i++){
    let img=new Image();
    img.addEventListener("load",loadHandler);
    img.src=`./img/${i}-.jpg`;
}
function loadHandler(e){
    console.log(e.currentTarget.width,e.currentTarget.src);
}


// 图片按顺序加载
// 1、首先加载第一张图片
// 2、侦听load事件，当完成加载，把图片放在数组中，并且打印图片宽度和地址
// 3、执行message函数，增加num，通知继续加载
// 4、收到通知就会继续加载内容，num已经改变，所以加载最新的

var num=3;
var arr=[];
document.addEventListener("startLoad",loadImage);
loadImage();
function loadImage(){
    var img=new Image();
    img.addEventListener("load",loadHandler);
    img.src=`./img/${num}-.jpg`;
}

function loadHandler(e){
    arr.push(e.currentTarget);
    console.log(e.currentTarget.width,e.currentTarget.src);
    message();
}

function message(){
    num++;
    if(num>79){
        return;
    }
    var evt=new Event("startLoad");
    // 向document抛发新建的event事件
    document.dispatchEvent(evt);
}



// 当加载完成，改变num，然后重新调用loadImage
var num=3;
var arr=[];
loadImage();
function loadImage(){
    var img=new Image();
    img.addEventListener("load",loadHandler);
    img.src=`./img/${num}-.jpg`;
}

function loadHandler(e){
    arr.push(e.currentTarget);
    num++;
    if(num>79){
        arr.forEach(function(item){
            console.log(item.width,item.src);
        });
        return;
    }
    loadImage();
}


// 1、创建一张图片
// 2、给这个图片增加事件侦听load
// 3、加载完成后，将加载进来的图片复制一个新的，放在数组中
// 4、修改num
// 5、给这个图片的地址赋予一个新地址，因为改变图片的地址就会重新触发load
//所以会继续进入loadHandler函数，不断加载，直到加载完成
var arr=[];
var num=3;
loadImage();
function loadImage(){
    var img=new Image;
    img.addEventListener("load",loadHandler);
    img.src=`./img/3-.jpg`;
}

function loadHandler(e){
    arr.push(e.currentTarget.cloneNode(false));
    console.log(e.currentTarget.width,e.currentTarget.src);
    num++;
    if(num>79){
        init(arr);
        return;
    }
    e.currentTarget.src=`./img/${num}-.jpg`;
}

function init(){

}



图片复制
var img=new Image();
img.src="./img/4.jpg";
document.body.appendChild(img);
 
var img1=img.cloneNode(false);
document.body.appendChild(img1);
 
img.src="./img/5.jpg";
var img2=img.cloneNode(false);
document.body.appendChild(img);
 
img.src="./img/6.jpg";