Of Stack

Js images load in real time to provide web page opening speed

  • 2020-03-30 03:55:47
  • OfStack

Browse large websites, especially the picture is more than the picture, such as large e-commerce sites, you will find the first screen, scroll down when the picture load out, it is not necessary to load all the picture to load out, so as to open the speed of the network has been improved. The following is the author currently thought of the train of thought, if there is a better train of thought, hope not hesitate to give advice.

Real-time loading images thinking is very simple, actually a start to load the page doesn't need to load the image from the start (such as the second screen the following pictures, anyway is to scroll down to see, not set them into real-time load) when rolling down a path to a custom attributes, such as: < Aimg img class = "" SRC =" http://ctc.qzonestyle.gtimg.cn/ac/b.gif "data - SRC =" http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg "Alt =" 19 year old girl face to face with cancer 7 years ago amputation "/ > , SRC = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" is a 1 px * 1 px transparent GIF images, a custom attribute data - the "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" is the path of the picture in the SRC, scroll down to it the data - in the SRC value replace SRC, then put the data - the SRC attribute remove...

The following is the demo 


<!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>js Image real-time loading </title>
<style>
*{padding:0; margin:0;}
.wp{width:1000px; margin:5px auto; padding:10px 0; border-bottom:1px solid #dedede; overflow:hidden;}
ul li{ display:block; width:250px; float:left; margin:5px 0; list-style:none;}
.aimg{ display:block; height:300px; max-width:348px; border:1px solid #EEE; background:url(http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) no-repeat center center;}
</style>
</head>
<body>
<div class="wp">
<a href="http://www.cnblogs.com/xiaomou2014"><img src="http://pic.cnitblog.com/avatar/356740/20140716231521.png" alt="xiaomou2014 The head of "></a>
<a href="http://www.cnblogs.com/xiaomou2014">http://www.cnblogs.com/xiaomou2014</a>
cont2 The first image is loaded in real time 
</div>
<div class="cont1 wp">
<h2>cont1</h2>
<ul>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7 amputee 19 A girl with terminal cancer " target="_blank" ><img class="aimg" src="http://e.hiphotos.baidu.com/image/w%3D310/sign=e0e3bb2e38292df597c3aa148c315ce2/c83d70cf3bc79f3d8cd19a31b8a1cd11728b29fa.jpg" alt="19 A girl faces cancer  7 Amputation years ago " /></a></li>
<li><img class="aimg" src="http://h.hiphotos.baidu.com/image/w%3D310/sign=19bbb515ff1f4134e037037f151e95c1/b7fd5266d016092414bd8aedd60735fae7cd34af.jpg" /></li>
<li><img class="aimg" src="http://g.hiphotos.baidu.com/image/w%3D310/sign=dbbeb83d4b540923aa69657fa258d1dc/b812c8fcc3cec3fdaa0ce16bd488d43f879427f9.jpg" /></li>
<li><img class="aimg" src="http://c.hiphotos.baidu.com/image/w%3D310/sign=8e78cf5936a85edffa8cf822795409d8/bba1cd11728b47108b5b5bc5c1cec3fdfc032346.jpg" /></li>
<li><img class="aimg" src="http://e.hiphotos.baidu.com/image/w%3D310/sign=75538617df54564ee565e23883de9cde/c2cec3fdfc039245ea8f5b0b8594a4c27d1e25ff.jpg" /></li>
<li><img class="aimg" src="http://d.hiphotos.baidu.com/image/w%3D310/sign=4e7eef2892ef76c6d0d2fd2aad17fdf6/a9d3fd1f4134970a9bed2d2697cad1c8a7865d18.jpg" /></li>
<li><img class="aimg" src="http://a.hiphotos.baidu.com/image/w%3D310/sign=22e5b431bc096b63811958513c328733/ac345982b2b7d0a224577783c9ef76094b369a15.jpg" /></li>
<li><img class="aimg" src="http://g.hiphotos.baidu.com/image/w%3D310/sign=d76eb55fb33533faf5b6952f98d2fdca/ac6eddc451da81cbf76dbf9c5066d016082431d3.jpg" /></li>
<li><img class="aimg" src="http://f.hiphotos.baidu.com/image/w%3D310/sign=7f41436edbf9d72a1764161ce42a282a/adaf2edda3cc7cd9e81d13883b01213fb80e91aa.jpg" /></li>
<li><img class="aimg" src="http://b.hiphotos.baidu.com/image/w%3D310/sign=d1e3fa4567380cd7e61ea4ec9145ad14/ae51f3deb48f8c54f573c0da38292df5e1fe7fa6.jpg" /></li>
<li><img class="aimg" src="http://e.hiphotos.baidu.com/image/w%3D310/sign=03c6a3c737fae6cd0cb4ad603fb10f9e/b151f8198618367a4e593d2d2c738bd4b21ce56a.jpg" /></li>
<li><img class="aimg" src="http://a.hiphotos.baidu.com/image/w%3D310/sign=2c2009a6d01b0ef46ce89e5fedc651a1/b219ebc4b74543a90ac4bb441c178a82b801145e.jpg" /></li>
</ul>
</div>
<div class="cont2 wp">
<h2>cont2</h2>
<ul>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7 amputee 19 A girl with terminal cancer " target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" alt="19 A girl faces cancer  7 Amputation years ago " /></a></li>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7 amputee 19 A girl with terminal cancer " target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.jpg" alt="19 A girl faces cancer  7 Amputation years ago " /></a></li>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7 amputee 19 A girl with terminal cancer " target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg" alt="19 A girl faces cancer  7 Amputation years ago " /></a></li>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7 amputee 19 A girl with terminal cancer " target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg" alt="19 A girl faces cancer  7 Amputation years ago " /></a></li>
<li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7 amputee 19 A girl with terminal cancer " target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg" alt="19 A girl faces cancer  7 Amputation years ago " /></a></li>
<li><img class="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><img class="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><img class="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><img class="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><img class="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><img class="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><img class="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>
<div class="cont3 wp">
<h2>cont3</h2>
<ul>
<li><img class="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><img class="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><img class="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><img class="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><img class="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><img class="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><img class="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><img class="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><img class="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><img class="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><img class="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><img class="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>
//Compatible with IE for getElementsByClassName
if (navigator.appName == 'Microsoft Internet Explorer') {
document.getElementsByClassName = function() { 
var tTagName = "*"; 
if (arguments.length > 1) { 
tTagName = arguments[1]; 
} 
if (arguments.length > 2) { 
var pObj = arguments[2] 
} else { 
var pObj = document; 
} 
var objArr = pObj.getElementsByTagName(tTagName); 
var tRObj = new Array(); 
for ( var i = 0; i < objArr.length; i++) { 
if (objArr[i].className == arguments[0]) { 
tRObj.push(objArr[i]); 
} 
} 
return tRObj; 
} 
} 
//Image to load
function loadImg(imgClass,imgSrc){
//Data-src: the path to store the images that need to be loaded
var arrImg=document.getElementsByClassName(imgClass); //An array of images with class as imgClass needs to be loaded in real time
window.onscroll=function(){
for(var i=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>

As above in the demo pictures in cont1 is a loading page is displayed, is fixed for a home page layout, you can confirm the pictures is the second screen below, but for the content page, the location of the subject content images appear in the container is not to control, it is need to determine when to load the whole page is in the visible range, if it is within the scope of visual load it out and cast it from (home page, of course, also can do this, but if the speed is slow, then open the cover letter will have to wait until the entire page architecture after loading is completed to display images, rather than from the top down load), Set the width and height properties for the image to take up a place on the page, otherwise it will only take up the size of the transparent GIF image before loading.

In the following demo, we made some modifications to the content page. Window.onload and window.onscroll both trigger loading 


<!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>js Image real-time loading </title>
<style>
*{padding:0; margin:0;}
.wp{width:1000px; margin:5px auto; padding:10px 0; border-bottom:1px solid #dedede; overflow:hidden;}
.fl{width:700px; padding:25px; float:left; border:1px solid #dedede; line-height:40px; overflow:hidden;}
.fr{width:220px; height:800px; float:right; background-color:#dedede;}
.aimg{ display:block; max-width:700px; margin:0 auto; background:url(http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) no-repeat center center;}
</style>
</head>
<body>
<div class="wp">
<a href="http://www.cnblogs.com/xiaomou2014"><img src="http://pic.cnitblog.com/avatar/356740/20140716231521.png" alt="xiaomou2014 The head of "></a>
<a href="http://www.cnblogs.com/xiaomou2014">http://www.cnblogs.com/xiaomou2014</a>
</div>
<div class="wp">
<div class="fl">
<h2>7 amputee 19 A girl with terminal cancer </h2>
<p>http://www.cnblogs.com/xiaomou2014</p>
<img class="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>
<img class="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>
<img class="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 amputee 19 A girl with terminal cancer </p>
<a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7 amputee 19 A girl with terminal cancer " target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" alt="19 A girl faces cancer  7 Amputation years ago " width="640" height="480" /></a>
<p>7 amputee 19 A girl with terminal cancer </p>
<a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7 amputee 19 A girl with terminal cancer " target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.jpg" alt="19 A girl faces cancer  7 Amputation years ago " width="640" height="872" /></a>
<p>7 amputee 19 A girl with terminal cancer </p>
<a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7 amputee 19 A girl with terminal cancer " target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg" alt="19 A girl faces cancer  7 Amputation years ago " /></a>
<p>7 amputee 19 A girl with terminal cancer </p>
<a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7 amputee 19 A girl with terminal cancer " target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg" alt="19 A girl faces cancer  7 Amputation years ago " /></a>
<p>7 amputee 19 A girl with terminal cancer </p>
<a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" title="7 amputee 19 A girl with terminal cancer " target="_blank" ><img class="aimg" src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg" alt="19 A girl faces cancer  7 Amputation years ago " /></a>
</div>
<div class="fr">
</div>
</div>

<script>
//Compatible with IE for getElementsByClassName
if (navigator.appName == 'Microsoft Internet Explorer') {
document.getElementsByClassName = function() { 
var tTagName = "*"; 
if (arguments.length > 1) { 
tTagName = arguments[1]; 
} 
if (arguments.length > 2) { 
var pObj = arguments[2] 
} else { 
var pObj = document; 
} 
var objArr = pObj.getElementsByTagName(tTagName); 
var tRObj = new Array(); 
for ( var i = 0; i < objArr.length; i++) { 
if (objArr[i].className == arguments[0]) { 
tRObj.push(objArr[i]); 
} 
} 
return tRObj; 
} 
} 
//Image to load
function loadImg(imgClass,imgSrc){
//Data-src: the path to store the images that need to be loaded
var arrImg=document.getElementsByClassName(imgClass); //An array of images with class as imgClass needs to be loaded in real time
for(var i=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>
Related articles: