试想一下当你打开页面,图片还没有加载完,就显示body中的条条框框和杂七杂八的文字,这样的视觉效果大大减少了用户体验.所以这时候,"预加载图片"这个盖世英雄,有一天它会踩着七色云彩来拯救图片的加载问题和页面美观的效果
so,预加载图片是提高用户体验的一个很好方法。
原理:
图片预先加载到浏览器中,这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览网站内容时获得更好的用户体验。
废话不多说:上代码
==========================html==================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/loading.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
<script type="text/javascript">
var arr=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg'];
loading(arr,function(arrAllImg){
for(var i =0;i<arrAllImg.length;i++){
document.body.appendChild(arrAllImg[i]);
console.log(arrAllImg[i].offsetHeight)
}
})
</script>
</html>
==========================js==================================
function loading(arr,callBack){
//把所有创建的图片对象存起来
var arrAllImg = [];
//用来计数,检测所有的图片元素都加载完成
var count = 0;
//判断使用者传进来的第一个参数是否是数组
if(!(arr instanceof Array)){
return;
}
//根据传进来的图片路径的个数创建相应个数的图片对象
for(var i = 0;i<arr.length;i++){
//下面两句话一个意思
//js内置对象
// var img = new Image();
//DOM操作
var img = document.createElement('img');
img.src = arr[i];
//把创建好的图片对象放到数组中
arrAllImg.push(img);
}
//给所有的图片对象添加onload
for (var i = 0; i < arrAllImg.length; i++) {
arrAllImg[i].onload = function(){
//只有有一个图片对象的onload执行了,就证明它的图片加载完成,就让count加一
count++;
//如果count等于了图片元素的个数,就证明所有的图片都加载完了
if (count == arrAllImg.length) {
//这个时候就可以回调了,告诉使用者图片全部加载完成,你可以用了
if(callBack instanceof Function){
callBack(arrAllImg);
}
}
}
}
}
for (var i = 0; i < arrAllImg.length; i++) {
arrAllImg[i].onload =function(){
count++;
if(count ==arrAllImg.length){
// callBack(arrAllImg);
if(callBack instanceof Function){
callBack(arrAllImg);
}
}
}
}
}