<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片预加载</title>
</head>
<body>
<img src="" alt='error'>
<img src="" alt='error'>
<img src="" >
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="" alt='error'>
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<script type="text/javascript">
var imgs = document.querySelectorAll('img')
var arr = [
{url : '错误地址'},
{url : '正确地址'},
{url : '正确地址'},
{url : '正确地址'},
{url : '正确地址'},
{url : '正确地址'},
{url : '正确地址'},
{url : '正确地址'},
{url : '正确地址'},
{url : '正确地址'},
{url : '正确地址'},
{url : '正确地址'},
{url : '正确地址'},
{url : '正确地址'},
{url : '正确地址'},
{url : '正确地址'},
{url : '正确地址'},
{url : '错误地址'},
]
function addLoadEvent(func) { //延迟预加载时间，直到页面加载完毕
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
//测试
addLoadEvent(function(){console.log(123444)})
addLoadEvent(function(){console.log(123555)})
function preloadImg(){
var imgs = document.querySelectorAll('img')
if(arr instanceof Array){
var i, oImg;
for(i = 0, len = arr.length; i < len; i++){
oImg = new Image()
oImg.src = arr[i].url;
if(oImg.complete) { //complete属性是一个boolean值。如果图片加载成功或者是OImg对象没有src属性,返回的都是true,如果图片已经加载缓存成功，可以跳过onload(比如页面跳转回来以后,图片本地已经有缓存数据了，就不用onload了)
console.log('图片加载完成complete')
return
}
oImg.onload = (function() {
var j = i
return function() {
imgs[j].src = arr[j].url
console.log('图片加载完成onload')
}
}())
// oImg.src = arr[i].url; 如果加上complete属性判断的话,本行代码就必须放在上面，如果放在本行，则oImg.complete始终为true，则永远不会进入onload函数（原因是OImg对象没有src属性,返回的都是true）
}
}
}
addLoadEvent(preloadImg)
console.log('1')
console.log('2')
console.log('3')
console.log('4')
// 打印顺序1、2、3、4、图片加载完成complete
</script>
</body>
</html>
网友评论