SoFunction
Updated on 2025-04-10

JS picture real-time loading provides web page opening speed

Browse large websites, especially pictures with more pictures, such as large e-commerce websites. You will find that the first screen is outside the first screen. The pictures are loaded when scrolling down. There is no need to load all the pictures at the beginning, so that the speed of opening the web is greatly improved. The following are the ideas that the author has thought of at present. If you have a better idea, I hope you will give me some advice.

In fact, the idea of ​​real-time loading pictures is very simple. When the page starts loading, the pictures that do not need to be loaded from the beginning (such as the pictures below the second screen, you have to scroll down to see them anyway. It is better to set them to load in real-time when scrolling down) to a custom attribute, such as: <img class="aimg" src="/ac/" data-src="/a/2014_37/" alt="19-year-old girl faced cancer and had an amputation 7 years ago" />, src="/ac/" is a transparent gif picture of 1px*1px. The custom attribute "/a/2014_37/" is the path of the picture. When scrolling down to it, replace the value in data-src with src, and then remove the data-src attribute...

The following is the demo

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/"&gt;
&lt;html xmlns="http:///1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;jsPictures load in real time&lt;/title&gt;
&lt;style&gt;
*{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(/aoi/img/icenter/) no-repeat center center;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="wp"&gt;
&lt;a href="/xiaomou2014"&gt;&lt;img src="/avatar/356740/" alt="Xiaomou2014's avatar"&gt;&lt;/a&gt;
&lt;a href="/xiaomou2014"&gt;/xiaomou2014&lt;/a&gt;
cont2The image at the beginning is loaded in real time
&lt;/div&gt;
&lt;div class="cont1 wp"&gt;
&lt;h2&gt;cont1&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="/a/20140909/41906442_0.shtml#p=1" title="19-year-old girl with advanced cancer who had amputated 7 years ago" target="_blank" ><img class="aimg" src="/image/w%3D310/sign=e0e3bb2e38292df597c3aa148c315ce2/" alt="19-year-old girl faced cancer and had amputated 7 years ago" /></a></li>&lt;li&gt;&lt;img class="aimg" src="/image/w%3D310/sign=19bbb515ff1f4134e037037f151e95c1/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/image/w%3D310/sign=dbbeb83d4b540923aa69657fa258d1dc/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/image/w%3D310/sign=8e78cf5936a85edffa8cf822795409d8/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/image/w%3D310/sign=75538617df54564ee565e23883de9cde/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/image/w%3D310/sign=4e7eef2892ef76c6d0d2fd2aad17fdf6/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/image/w%3D310/sign=22e5b431bc096b63811958513c328733/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/image/w%3D310/sign=d76eb55fb33533faf5b6952f98d2fdca/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/image/w%3D310/sign=7f41436edbf9d72a1764161ce42a282a/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/image/w%3D310/sign=d1e3fa4567380cd7e61ea4ec9145ad14/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/image/w%3D310/sign=03c6a3c737fae6cd0cb4ad603fb10f9e/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/image/w%3D310/sign=2c2009a6d01b0ef46ce89e5fedc651a1/" /&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="cont2 wp"&gt;
&lt;h2&gt;cont2&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="/a/20140909/41906442_0.shtml#p=1" title="19-year-old girl with advanced cancer who had amputated 7 years ago" target="_blank" ><img class="aimg" src="/ac/" data-src="/a/2014_37/" alt="19-year-old girl faced cancer and had amputated 7 years ago" /></a></li>&lt;li&gt;&lt;a href="/a/20140909/41906442_0.shtml#p=1" title="19-year-old girl with advanced cancer who had amputated 7 years ago" target="_blank" ><img class="aimg" src="/ac/" data-src="/a/2014_37/" alt="19-year-old girl faced cancer and had amputated 7 years ago" /></a></li>&lt;li&gt;&lt;a href="/a/20140909/41906442_0.shtml#p=1" title="19-year-old girl with advanced cancer who had amputated 7 years ago" target="_blank" ><img class="aimg" src="/ac/" data-src="/a/2014_37/" alt="19-year-old girl faced cancer and had amputated 7 years ago" /></a></li>&lt;li&gt;&lt;a href="/a/20140909/41906442_0.shtml#p=1" title="19-year-old girl with advanced cancer who had amputated 7 years ago" target="_blank" ><img class="aimg" src="/ac/" data-src="/a/2014_37/" alt="19-year-old girl faced cancer and had amputated 7 years ago" /></a></li>&lt;li&gt;&lt;a href="/a/20140909/41906442_0.shtml#p=1" title="19-year-old girl with advanced cancer who had amputated 7 years ago" target="_blank" ><img class="aimg" src="/ac/" data-src="/a/2014_37/" alt="19-year-old girl faced cancer and had amputated 7 years ago" /></a></li>&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=655bcf71d31373f0f53f699e940f4b8b/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=3629f39bad51f3dec3b2bf65a4eff0ec/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=8c009502257f9e2f70351b092f31e962/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=f62f43b6ab773912c4268360c8198675/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=9ce0b545a918972ba33a06cbd6cc7b9d/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=9d833f1b950a304e5222a6fbe1c9a7c3/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=4a93da2a552c11dfded1b92253266255/" /&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="cont3 wp"&gt;
&lt;h2&gt;cont3&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=71556df3d2160924dc25a41ae406359b/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=53e69395b8a1cd1105b674218913c8b0/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=3749c38a4334970a4773162ea5cbd1c0/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=8563bf5757fbb2fb342b5e137f4b2043/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=74856b065e6034a829e2be80fb1249d9/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=49e22cda34d12f2ece05a8617fc2d5ff/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=539b0d21347adab43dd01d42bbd5b36b/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=5077c2c2c1cec3fd8b3ea174e689d4b6/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=50bdad348418367aad8979dc1e728b68/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=f3ef9fa4e9c4b7453494b117fffd1e78/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=30a6338deb24b899de3c7f395e071d59/" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=75a14ae060d9f2d3201122ee99ec8a53/" /&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;script&gt;
//Compatible with IE to getElementsByClassNameif ( == 'Microsoft Internet Explorer') {
 = function() { 
var tTagName = "*"; 
if ( &gt; 1) { 
tTagName = arguments[1]; 
} 
if ( &gt; 2) { 
var pObj = arguments[2] 
} else { 
var pObj = document; 
} 
var objArr = (tTagName); 
var tRObj = new Array(); 
for ( var i = 0; i &lt; ; i++) { 
if (objArr[i].className == arguments[0]) { 
(objArr[i]); 
} 
} 
return tRObj; 
} 
} 
//Picture loadingfunction loadImg(imgClass,imgSrc){
//data-src: The path to store the picture to be loadedvar arrImg=(imgClass); //Requiring real-time loading of image array with class imgClass=function(){
for(var i=0; i&lt;; i++){
if(!arrImg[i].getAttribute(imgSrc)) continue; 
if(++ &gt;arrImg[i].offsetTop){
arrImg[i].setAttribute("src",arrImg[i].getAttribute(imgSrc));
arrImg[i].removeAttribute(imgSrc);
}
}
}
}
loadImg("aimg","data-src");
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

For example, the pictures in cont1 in the above demo are displayed as soon as the page is loaded. The layout of the homepage is fixed. You can confirm that those pictures are below the second screen. However, for the content page, the location of the pictures in the main content container is uncontrollable. This requires that when the real page is loaded, it is determined whether they are within the visual range. If it is within the visual range, it is loaded (of course, the homepage can also do this, but if the Internet speed is very slow, when opening the homepage, you have to wait until the entire page architecture is loaded before the picture is displayed, instead of loading it from top to bottom). The picture should be set to width and height attributes, which allows it to occupy a position on the page, otherwise it will only occupy the size of the transparent gif image before loading.

The following demo has made some modifications to the content page, and it triggers loading when it is

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/"&gt;
&lt;html xmlns="http:///1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;jsPictures load in real time&lt;/title&gt;
&lt;style&gt;
*{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(/aoi/img/icenter/) no-repeat center center;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="wp"&gt;
&lt;a href="/xiaomou2014"&gt;&lt;img src="/avatar/356740/" alt="Xiaomou2014's avatar"&gt;&lt;/a&gt;
&lt;a href="/xiaomou2014"&gt;/xiaomou2014&lt;/a&gt;
&lt;/div&gt;
&lt;div class="wp"&gt;
&lt;div class="fl"&gt;
&lt;h2&gt;7Amputated a year ago19A year old girl with advanced cancer&lt;/h2&gt;
&lt;p&gt;/xiaomou2014&lt;/p&gt;
&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=f3ef9fa4e9c4b7453494b117fffd1e78/" width="310" height="428" /&gt;
&lt;p&gt;/xiaomou2014&lt;/p&gt;
&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=30a6338deb24b899de3c7f395e071d59/" width="310" height="419" /&gt;
&lt;p&gt;/xiaomou2014&lt;/p&gt;
&lt;img class="aimg" src="/ac/" data-src="/image/w%3D310/sign=75a14ae060d9f2d3201122ee99ec8a53/" width="310" height="428" /&gt;
&lt;p&gt;7Amputated a year ago19A year old girl with advanced cancer&lt;/p&gt;
&lt;a href="/a/20140909/41906442_0.shtml#p=1" title="19-year-old girl with advanced cancer who had amputated 7 years ago" target="_blank" ><img class="aimg" src="/ac/" data-src="/a/2014_37/" alt="19-year-old girl had amputated 7 years ago" width="640" height="480" /></a>&lt;p&gt;7Amputated a year ago19A year old girl with advanced cancer&lt;/p&gt;
&lt;a href="/a/20140909/41906442_0.shtml#p=1" title="19-year-old girl with advanced cancer who had amputated 7 years ago" target="_blank" ><img class="aimg" src="/ac/" data-src="/a/2014_37/" alt="19-year-old girl faced cancer. She had amputated 7 years ago" width="640" height="872" /></a>&lt;p&gt;7Amputated a year ago19A year old girl with advanced cancer&lt;/p&gt;
&lt;a href="/a/20140909/41906442_0.shtml#p=1" title="19-year-old girl with advanced cancer who had amputated 7 years ago" target="_blank" ><img class="aimg" src="/ac/" data-src="/a/2014_37/" alt="19-year-old girl faced cancer and had amputated 7 years ago" /></a>&lt;p&gt;7Amputated a year ago19A year old girl with advanced cancer&lt;/p&gt;
&lt;a href="/a/20140909/41906442_0.shtml#p=1" title="19-year-old girl with advanced cancer who had amputated 7 years ago" target="_blank" ><img class="aimg" src="/ac/" data-src="/a/2014_37/" alt="19-year-old girl faced cancer and had amputated 7 years ago" /></a>&lt;p&gt;7Amputated a year ago19A year old girl with advanced cancer&lt;/p&gt;
&lt;a href="/a/20140909/41906442_0.shtml#p=1" title="19-year-old girl with advanced cancer who had amputated 7 years ago" target="_blank" ><img class="aimg" src="/ac/" data-src="/a/2014_37/" alt="19-year-old girl faced cancer and had amputated 7 years ago" /></a>&lt;/div&gt;
&lt;div class="fr"&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
//Compatible with IE to getElementsByClassNameif ( == 'Microsoft Internet Explorer') {
 = function() { 
var tTagName = "*"; 
if ( &gt; 1) { 
tTagName = arguments[1]; 
} 
if ( &gt; 2) { 
var pObj = arguments[2] 
} else { 
var pObj = document; 
} 
var objArr = (tTagName); 
var tRObj = new Array(); 
for ( var i = 0; i &lt; ; i++) { 
if (objArr[i].className == arguments[0]) { 
(objArr[i]); 
} 
} 
return tRObj; 
} 
} 
//Picture loadingfunction loadImg(imgClass,imgSrc){
//data-src: The path to store the picture to be loadedvar arrImg=(imgClass); //Requiring real-time loading of image array with class imgClassfor(var i=0; i&lt;; i++){
if(!arrImg[i].getAttribute(imgSrc)) continue; 
if(++ &gt;arrImg[i].offsetTop){
arrImg[i].setAttribute("src",arrImg[i].getAttribute(imgSrc));
arrImg[i].removeAttribute(imgSrc);
}
}
}
==function(){loadImg("aimg","data-src")}

&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;