图片加载js--图片被动加载

最新推荐文章于 2022-08-13 14:10:10 发布

全栈技术圈

最新推荐文章于 2022-08-13 14:10:10 发布

阅读量651

点赞数

分类专栏：优化小技巧 javascript

本文链接：https://blog.csdn.net/chen_wen_xian/article/details/9076531

版权

javascript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

优化小技巧

4 篇文章 0 订阅

订阅专栏

Javascript实现的页面图片被动加载类，在使用前用1像素图像进行占位，并给img添加自定义_src属性，当有图片进入可视区域内时，载入图片，提高页面载入速度，节省不必要的流量和连接数。主函数获取其他脚本注册到window上的onscroll和onresize事件，避免冲突。本代码在IE6 firefox3.6 Firefox4.0 chrome opera 11.10中测试通过。被动加载的意义：当用户拖动滚动条，如果此时网页有图片的话开始加载，并不是拖不拖滚动条都先把图片加载完。

这样做的好处： 　　

1，加快页面载入速度，提高用户体验，首页图片较多的页面尤其明显　

2，节省流量和服务器连接数

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.οnlοad=function(){
visible();
window.οnresize=function(){
visible();
}
document.οnscrοll=function(){
visible();
}
function visible(){
var oImg=document.getElementsByTagName('img');
var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;//滚动条的高度;
var windowH=window.innerHeight;

for(var i=0; i<oImg.length; i++){
oImg[i].index=i;
var imgT=oImg[i].offsetTop;//表示这一张图片相对于最顶端的距离

if((scrollTop+windowH)>imgT && scrollTop<imgT){//判断图片是否在可视区

//判断是否已经修改图片的路径了
if(oImg[i].attributes["src"].value != oImg[i].attributes["_src"].value && oImg[i].attributes["src"].value !='img/xian.jpg'){
oImg[i].οnerrοr=function(){//图片的加载失败时就触发事件
this.src='img/xian.jpg';//this表示当前触发事件的图片
alert('图片'+this.index+'加载出错');
}
oImg[i].src=oImg[i].attributes["_src"].value;
//getAttributes(属性名)表示获取属性的值
//oImg[i].attributes["_src"].value也是获取属性的值
}
}
}
}

};
</script>
<style>
*{ padding:0; margin:0;}
ul{ width:500px; margin:20px auto;}
ul li{ list-style-type:none; margin-bottom:120px;}
</style>
</head>

<body>
<ul style="margin-top:50px">
<li>1<img src="img/wen.png" _src="img/31.jpg" width="200" height="100" /></li>
<li>2<img src="img/wen.png" _src="img/32.jpg" width="200" height="100" /></li>
<li>3<img src="img/wen.png" _src="img/33.jpg" width="200" height="100" /></li>
<li>4<img src="img/wen.png" _src="img/4.jpg" width="200" height="100" /></li>
<li>5<img src="img/wen.png" _src="img/5.jpg" width="200" height="100" /></li>
<li>6<img src="img/wen.png" _src="img/6.jpg" width="200" height="100" /></li>
</ul>
<ul style="margin-top:50px">
<li>7<img src="img/wen.png" _src="img/7.jpg" width="200" height="100" /></li>
<li>8<img src="img/wen.png" _src="img/8.jpg" width="200" height="100" /></li>
<li>9<img src="img/wen.png" _src="img/9.jpg" width="200" height="100" /></li>
<li>10<img src="img/wen.png" _src="img/10.jpg" width="200" height="100" /></li>
<li>11<img src="img/wen.png" _src="img/11.jpg" width="200" height="100" /></li>
<li>12<img src="img/wen.png" _src="img/12.jpg" width="200" height="100" /></li>
<li>13<img src="img/wen.png" _src="img/13.jpg" width="200" height="100" /></li>
<li>14<img src="img/wen.png" _src="img/14.jpg" width="200" height="100" /></li>
<li>15<img src="img/wen.png" _src="img/15.jpg" width="200" height="100" /></li>
</ul>
</body>
</html>

在根目录下的img文件夹中的图片：

全栈技术圈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片加载js--图片被动加载

Javascript实现的页面图片被动加载类，在使用前用1像素图像进行占位，并给img添加自定义_src属性，当有图片进入可视区域内时，载入图片，提高页面载入速度，节省不必要的流量和连接数。主函数获取其他脚本注册到window上的onscroll和onresize事件，避免冲突。本代码在IE6 firefox3.6 Firefox4.0 chrome opera 11.10中测试通过。被动加
复制链接

扫一扫