提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

js图片实时加载提供网页打开速度

JS实时网页 图片 打开 加载 提供 速度
2023-06-13 09:15:45 时间

浏览大型网站，特别是图片比较多的图片，如大型的电商网站，你会发现处了第一屏外，往下滚动的时候图片才加载出来，没必要一开始加载就要把全部图片加载出来，这样子打开网面的速度得到了很好提高。以下是笔者目前所想到的思路，如果有更好的思路，望不吝赐教。

其实实时加载图片思路很简单，页面一开始加载的时候把不需要一开始就加载的图片（如第二屏以下的图片，反正是要往下滚动才能看到的，不如把它们设置成往下滚动的时候再实时加载）路径保持到一个自定义的属性里，如：<imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"alt="19岁女孩直面癌症7年前曾截肢"/>，src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"是一个1px*1px的透明gif图片，自定义属性data-src里的"http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"才是图片的路径，往下滚动到它的时候把data-src里的值替换掉src的值，然后把data-src属性移除掉……

如下是demo

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>js图片实时加载</title>
<style>
*{padding:0;margin:0;}
.wp{width:1000px;margin:5pxauto;padding:10px0;border-bottom:1pxsolid#dedede;overflow:hidden;}
ulli{display:block;width:250px;float:left;margin:5px0;list-style:none;}
.aimg{display:block;height:300px;max-width:348px;border:1pxsolid#EEE;background:url(http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif)no-repeatcentercenter;}
</style>
</head>
<body>
<divclass="wp">
<ahref="http://www.cnblogs.com/xiaomou2014"><imgsrc="http://pic.cnitblog.com/avatar/356740/20140716231521.png"alt="xiaomou2014的头像"></a>
<ahref="http://www.cnblogs.com/xiaomou2014">http://www.cnblogs.com/xiaomou2014</a>
cont2开始的图片是实时加载的
</div>
<divclass="cont1wp">
<h2>cont1</h2>
<ul>
<li><ahref="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"title="7年前截肢的19岁癌症晚期女孩"target="_blank"><imgclass="aimg"src="http://e.hiphotos.baidu.com/image/w%3D310/sign=e0e3bb2e38292df597c3aa148c315ce2/c83d70cf3bc79f3d8cd19a31b8a1cd11728b29fa.jpg"alt="19岁女孩直面癌症7年前曾截肢"/></a></li>
<li><imgclass="aimg"src="http://h.hiphotos.baidu.com/image/w%3D310/sign=19bbb515ff1f4134e037037f151e95c1/b7fd5266d016092414bd8aedd60735fae7cd34af.jpg"/></li>
<li><imgclass="aimg"src="http://g.hiphotos.baidu.com/image/w%3D310/sign=dbbeb83d4b540923aa69657fa258d1dc/b812c8fcc3cec3fdaa0ce16bd488d43f879427f9.jpg"/></li>
<li><imgclass="aimg"src="http://c.hiphotos.baidu.com/image/w%3D310/sign=8e78cf5936a85edffa8cf822795409d8/bba1cd11728b47108b5b5bc5c1cec3fdfc032346.jpg"/></li>
<li><imgclass="aimg"src="http://e.hiphotos.baidu.com/image/w%3D310/sign=75538617df54564ee565e23883de9cde/c2cec3fdfc039245ea8f5b0b8594a4c27d1e25ff.jpg"/></li>
<li><imgclass="aimg"src="http://d.hiphotos.baidu.com/image/w%3D310/sign=4e7eef2892ef76c6d0d2fd2aad17fdf6/a9d3fd1f4134970a9bed2d2697cad1c8a7865d18.jpg"/></li>
<li><imgclass="aimg"src="http://a.hiphotos.baidu.com/image/w%3D310/sign=22e5b431bc096b63811958513c328733/ac345982b2b7d0a224577783c9ef76094b369a15.jpg"/></li>
<li><imgclass="aimg"src="http://g.hiphotos.baidu.com/image/w%3D310/sign=d76eb55fb33533faf5b6952f98d2fdca/ac6eddc451da81cbf76dbf9c5066d016082431d3.jpg"/></li>
<li><imgclass="aimg"src="http://f.hiphotos.baidu.com/image/w%3D310/sign=7f41436edbf9d72a1764161ce42a282a/adaf2edda3cc7cd9e81d13883b01213fb80e91aa.jpg"/></li>
<li><imgclass="aimg"src="http://b.hiphotos.baidu.com/image/w%3D310/sign=d1e3fa4567380cd7e61ea4ec9145ad14/ae51f3deb48f8c54f573c0da38292df5e1fe7fa6.jpg"/></li>
<li><imgclass="aimg"src="http://e.hiphotos.baidu.com/image/w%3D310/sign=03c6a3c737fae6cd0cb4ad603fb10f9e/b151f8198618367a4e593d2d2c738bd4b21ce56a.jpg"/></li>
<li><imgclass="aimg"src="http://a.hiphotos.baidu.com/image/w%3D310/sign=2c2009a6d01b0ef46ce89e5fedc651a1/b219ebc4b74543a90ac4bb441c178a82b801145e.jpg"/></li>
</ul>
</div>
<divclass="cont2wp">
<h2>cont2</h2>
<ul>
<li><ahref="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"title="7年前截肢的19岁癌症晚期女孩"target="_blank"><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"alt="19岁女孩直面癌症7年前曾截肢"/></a></li>
<li><ahref="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"title="7年前截肢的19岁癌症晚期女孩"target="_blank"><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.jpg"alt="19岁女孩直面癌症7年前曾截肢"/></a></li>
<li><ahref="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"title="7年前截肢的19岁癌症晚期女孩"target="_blank"><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg"alt="19岁女孩直面癌症7年前曾截肢"/></a></li>
<li><ahref="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"title="7年前截肢的19岁癌症晚期女孩"target="_blank"><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg"alt="19岁女孩直面癌症7年前曾截肢"/></a></li>
<li><ahref="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"title="7年前截肢的19岁癌症晚期女孩"target="_blank"><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg"alt="19岁女孩直面癌症7年前曾截肢"/></a></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://e.hiphotos.baidu.com/image/w%3D310/sign=655bcf71d31373f0f53f699e940f4b8b/86d6277f9e2f07089c207d0aeb24b899a901f297.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://d.hiphotos.baidu.com/image/w%3D310/sign=3629f39bad51f3dec3b2bf65a4eff0ec/94cad1c8a786c917d4016968cb3d70cf3bc75764.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://f.hiphotos.baidu.com/image/w%3D310/sign=8c009502257f9e2f70351b092f31e962/9922720e0cf3d7ca56401892f01fbe096a63a99b.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=f62f43b6ab773912c4268360c8198675/a1ec08fa513d269759c20d5657fbb2fb4316d8a3.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://e.hiphotos.baidu.com/image/w%3D310/sign=9ce0b545a918972ba33a06cbd6cc7b9d/a8773912b31bb051b4ef3a79347adab44bede09c.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=9d833f1b950a304e5222a6fbe1c9a7c3/d1160924ab18972bb49b4bd5e4cd7b899e510a0f.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=4a93da2a552c11dfded1b92253266255/d62a6059252dd42a007e1c62013b5bb5c8eab887.jpg"/></li>
</ul>
</div>
<divclass="cont3wp">
<h2>cont3</h2>
<ul>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://h.hiphotos.baidu.com/image/w%3D310/sign=71556df3d2160924dc25a41ae406359b/f703738da977391274b38fc4fa198618377ae2fa.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://d.hiphotos.baidu.com/image/w%3D310/sign=53e69395b8a1cd1105b674218913c8b0/ac4bd11373f08202f195e69a49fbfbedab641b0b.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://h.hiphotos.baidu.com/image/w%3D310/sign=3749c38a4334970a4773162ea5cbd1c0/5366d0160924ab1808b1ea9237fae6cd7a890beb.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://e.hiphotos.baidu.com/image/w%3D310/sign=8563bf5757fbb2fb342b5e137f4b2043/3b87e950352ac65cccb5d179f9f2b21193138a0c.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://f.hiphotos.baidu.com/image/w%3D310/sign=74856b065e6034a829e2be80fb1249d9/d000baa1cd11728baab06e25cafcc3cec3fd2c1c.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://c.hiphotos.baidu.com/image/w%3D310/sign=49e22cda34d12f2ece05a8617fc2d5ff/cdbf6c81800a19d88e30c90831fa828ba61e468f.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://d.hiphotos.baidu.com/image/w%3D310/sign=539b0d21347adab43dd01d42bbd5b36b/54fbb2fb43166d22e4c8ab9d442309f79052d278.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://b.hiphotos.baidu.com/image/w%3D310/sign=5077c2c2c1cec3fd8b3ea174e689d4b6/4afbfbedab64034f9195fd08adc379310a551d67.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=50bdad348418367aad8979dc1e728b68/3c6d55fbb2fb43168dce1a6722a4462308f7d3de.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://b.hiphotos.baidu.com/image/w%3D310/sign=f3ef9fa4e9c4b7453494b117fffd1e78/0bd162d9f2d3572ce86585518813632763d0c3bc.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=30a6338deb24b899de3c7f395e071d59/0b46f21fbe096b63eeba47dd0e338744eaf8ac9f.jpg"/></li>
<li><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://g.hiphotos.baidu.com/image/w%3D310/sign=75a14ae060d9f2d3201122ee99ec8a53/500fd9f9d72a60592b78941b2a34349b033bba42.jpg"/></li>
</ul>
</div>

<script>
//兼容IE对getElementsByClassName
if(navigator.appName=="MicrosoftInternetExplorer"){
document.getElementsByClassName=function(){
vartTagName="*";
if(arguments.length>1){
tTagName=arguments[1];
}
if(arguments.length>2){
varpObj=arguments[2]
}else{
varpObj=document;
}
varobjArr=pObj.getElementsByTagName(tTagName);
vartRObj=newArray();
for(vari=0;i<objArr.length;i++){
if(objArr[i].className==arguments[0]){
tRObj.push(objArr[i]);
}
}
returntRObj;
}
}
//图片加载
functionloadImg(imgClass,imgSrc){
//data-src:存放需要加载的图片的路径
vararrImg=document.getElementsByClassName(imgClass);//需要实时加载class为imgClass的图片数组
window.onscroll=function(){
for(vari=0;i<arrImg.length;i++){
if(!arrImg[i].getAttribute(imgSrc))continue;
if(document.documentElement.scrollTop+document.body.scrollTop+document.documentElement.clientHeight>arrImg[i].offsetTop){
arrImg[i].setAttribute("src",arrImg[i].getAttribute(imgSrc));
arrImg[i].removeAttribute(imgSrc);
}
}
}
}
loadImg("aimg","data-src");
</script>
</body>
</html>

如上demo里的cont1里的图片是一加载页面就显示的，对于首页布局是固定的，可以确认那些图片是第二屏以下的，但是对于内容页，主体内容容器里的图片出现的位置是不可控制的，这就需要加载完毕真个页面的时候再判断是不是在在可视范围内，如果是在可视范围内就把它加载出来（当然，首页也可这么做，但是如果网速很慢，那么打开首页的时候要等到整个页面架构加载完毕之后才显示图片，而不是从上而下加载出来），图片要设置width与height属性，这让它在页面占一个位置，不然为加载前它只占透明gif图片的大小位置。

如下demo针对内容页做了一点修改，window.onload、window.onscroll的时候都触发加载

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>js图片实时加载</title>
<style>
*{padding:0;margin:0;}
.wp{width:1000px;margin:5pxauto;padding:10px0;border-bottom:1pxsolid#dedede;overflow:hidden;}
.fl{width:700px;padding:25px;float:left;border:1pxsolid#dedede;line-height:40px;overflow:hidden;}
.fr{width:220px;height:800px;float:right;background-color:#dedede;}
.aimg{display:block;max-width:700px;margin:0auto;background:url(http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif)no-repeatcentercenter;}
</style>
</head>
<body>
<divclass="wp">
<ahref="http://www.cnblogs.com/xiaomou2014"><imgsrc="http://pic.cnitblog.com/avatar/356740/20140716231521.png"alt="xiaomou2014的头像"></a>
<ahref="http://www.cnblogs.com/xiaomou2014">http://www.cnblogs.com/xiaomou2014</a>
</div>
<divclass="wp">
<divclass="fl">
<h2>7年前截肢的19岁癌症晚期女孩</h2>
<p>http://www.cnblogs.com/xiaomou2014</p>
<imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://b.hiphotos.baidu.com/image/w%3D310/sign=f3ef9fa4e9c4b7453494b117fffd1e78/0bd162d9f2d3572ce86585518813632763d0c3bc.jpg"width="310"height="428"/>
<p>http://www.cnblogs.com/xiaomou2014</p>
<imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=30a6338deb24b899de3c7f395e071d59/0b46f21fbe096b63eeba47dd0e338744eaf8ac9f.jpg"width="310"height="419"/>
<p>http://www.cnblogs.com/xiaomou2014</p>
<imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://g.hiphotos.baidu.com/image/w%3D310/sign=75a14ae060d9f2d3201122ee99ec8a53/500fd9f9d72a60592b78941b2a34349b033bba42.jpg"width="310"height="428"/>
<p>7年前截肢的19岁癌症晚期女孩</p>
<ahref="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"title="7年前截肢的19岁癌症晚期女孩"target="_blank"><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"alt="19岁女孩直面癌症7年前曾截肢"width="640"height="480"/></a>
<p>7年前截肢的19岁癌症晚期女孩</p>
<ahref="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"title="7年前截肢的19岁癌症晚期女孩"target="_blank"><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.jpg"alt="19岁女孩直面癌症7年前曾截肢"width="640"height="872"/></a>
<p>7年前截肢的19岁癌症晚期女孩</p>
<ahref="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"title="7年前截肢的19岁癌症晚期女孩"target="_blank"><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg"alt="19岁女孩直面癌症7年前曾截肢"/></a>
<p>7年前截肢的19岁癌症晚期女孩</p>
<ahref="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"title="7年前截肢的19岁癌症晚期女孩"target="_blank"><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg"alt="19岁女孩直面癌症7年前曾截肢"/></a>
<p>7年前截肢的19岁癌症晚期女孩</p>
<ahref="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1"title="7年前截肢的19岁癌症晚期女孩"target="_blank"><imgclass="aimg"src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif"data-src="http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg"alt="19岁女孩直面癌症7年前曾截肢"/></a>
</div>
<divclass="fr">
</div>
</div>

<script>
//兼容IE对getElementsByClassName
if(navigator.appName=="MicrosoftInternetExplorer"){
document.getElementsByClassName=function(){
vartTagName="*";
if(arguments.length>1){
tTagName=arguments[1];
}
if(arguments.length>2){
varpObj=arguments[2]
}else{
varpObj=document;
}
varobjArr=pObj.getElementsByTagName(tTagName);
vartRObj=newArray();
for(vari=0;i<objArr.length;i++){
if(objArr[i].className==arguments[0]){
tRObj.push(objArr[i]);
}
}
returntRObj;
}
}
//图片加载
functionloadImg(imgClass,imgSrc){
//data-src:存放需要加载的图片的路径
vararrImg=document.getElementsByClassName(imgClass);//需要实时加载class为imgClass的图片数组
for(vari=0;i<arrImg.length;i++){
if(!arrImg[i].getAttribute(imgSrc))continue;
if(document.documentElement.scrollTop+document.body.scrollTop+document.documentElement.clientHeight>arrImg[i].offsetTop){
arrImg[i].setAttribute("src",arrImg[i].getAttribute(imgSrc));
arrImg[i].removeAttribute(imgSrc);
}
}
}
window.onload=window.onscroll=function(){loadImg("aimg","data-src")}

</script>
</body>
</html>

相关文章