图片预加载

最新推荐文章于 2022-09-09 21:05:54 发布

Tony_Liu0611

最新推荐文章于 2022-09-09 21:05:54 发布

阅读量392

点赞数

分类专栏： javascript 文章标签：用户体验图片

本文链接：https://blog.csdn.net/Tony_Liu0611/article/details/52176130

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

试想一下当你打开页面,图片还没有加载完,就显示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);
}
}
}
}
}

Tony_Liu0611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片预加载

试想一下当你打开页面,图片还没有加载完,就显示body中的条条框框和杂七杂八的文字,这样的视觉效果大大减少了用户体验.所以这时候,"预加载图片"这个盖世英雄，有一天它会踩着七色云彩来拯救图片的加载问题和页面美观的效果so,预加载图片是提高用户体验的一个很好方法。原理:图片预先加载到浏览器中，这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，
复制链接

扫一扫