使用原生JavaScript实现图片预加载,方法简单代码少

//===结构代码

　　<img  src="./loading.gif" />

//===首先在页面显示的是一个loading图  当请求返回的时候把返回的图片替换上去

//====js代码

let imgArr = [

　　'./beautiful.jpg',

　　'./beautiful.jpg',

　　'./beautiflu.jpg',

　　'./beautiful.jpg',

]

let imgwrap =[ ]

function perloading (arr) {  

　　fror(let i=0;i<arr.length;i++) {

　　　//可省略　imgwrap[i] = new Image()

　　　//可省略　imgwrap[i].src =arr[i]

　　　　//===在这里使用setTimeout模拟网络请求

　　　　setTimeout(()=>{

　　　　　　$('.img').src= arr[i]

　　　　},1000)

　　}

}

//====调用函数

perloading(imgArr)

页面打开时的效果图

请求返回后的效果: