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. In this way, 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 property, such as: <img src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" />, src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" is a transparent gif image of 1px*1px. The custom attribute "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" is the path of the image. When scrolling down to it, replace the value in data-src with the value of src, and then remove the data-src attribute...
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 loading in real time</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><a href="http://www.cnblogs.com/xiaomou2014"><img src="http://pic.cnitblog.com/avatar/356740/20140716231521.png"></a><a href="http://www.cnblogs.com/xiaomou2014">http://www.cnblogs.com/xiaomou2014</a>cont2 The image starting with the beginning is loaded in real time</div><div><h2>cont1</h2><ul><li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target="_blank" ><img src="http://e.hiphotos.baidu.com/image/w%3D310/sign=e0e3bb2e38292df597c3aa148c315ce2/c83d70cf3bc79f3d8cd19a31b8a1cd11728b29fa.jpg" /></a></li><li><img src="http://h.hiphotos.baidu.com/image/w%3D310/sign=19bbb515ff1f4134e037037f151e95c1/b7fd5266d016092414bd8aedd60735fae7cd34af.jpg" /></li><li><img src="http://g.hiphotos.baidu.com/image/w%3D310/sign=dbbeb83d4b540923aa69657fa258d1dc/b812c8fcc3cec3fdaa0ce16bd488d43f879427f9.jpg" /></li><li><img src="http://c.hiphotos.baidu.com/image/w%3D310/sign=8e78cf5936a85edffa8cf822795409d8/bba1cd11728b47108b5b5bc5c1cec3fdfc032346.jpg" /></li><li><img src="http://e.hiphotos.baidu.com/image/w%3D310/sign=75538617df54564ee565e23883de9cde/c2cec3fdfc039245ea8f5b0b8594a4c27d1e25ff.jpg" /></li><li><img src="http://d.hiphotos.baidu.com/image/w%3D310/sign=4e7eef2892ef76c6d0d2fd2aad17fdf6/a9d3fd1f4134970a9bed2d2697cad1c8a7865d18.jpg" /></li><li><img src="http://a.hiphotos.baidu.com/image/w%3D310/sign=22e5b431bc096b63811958513c328733/ac345982b2b7d0a224577783c9ef76094b369a15.jpg" /></li><li><img src="http://g.hiphotos.baidu.com/image/w%3D310/sign=d76eb55fb33533faf5b6952f98d2fdca/ac6eddc451da81cbf76dbf9c5066d016082431d3.jpg" /></li><li><img src="http://f.hiphotos.baidu.com/image/w%3D310/sign=7f41436edbf9d72a1764161ce42a282a/adaf2edda3cc7cd9e81d13883b01213fb80e91aa.jpg" /></li><li><img src="http://b.hiphotos.baidu.com/image/w%3D310/sign=d1e3fa4567380cd7e61ea4ec9145ad14/ae51f3deb48f8c54f573c0da38292df5e1fe7fa6.jpg" /></li><li><img src="http://e.hiphotos.baidu.com/image/w%3D310/sign=03c6a3c737fae6cd0cb4ad603fb10f9e/b151f8198618367a4e593d2d2c738bd4b21ce56a.jpg" /></li><li><img src="http://a.hiphotos.baidu.com/image/w%3D310/sign=2c2009a6d01b0ef46ce89e5fedc651a1/b219ebc4b74543a90ac4bb441c178a82b801145e.jpg" /></a></ul></div><div><h2>cont2</h2><ul><li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target="_blank" ><img src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" /></a></li><li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target="_blank" ><img src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifeng.com/a/2014_37/89ed5c7eff33abf.jpg" /></a></li><li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target="_blank" ><img src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg" /></a></li><li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target="_blank" ><img src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg" /></a></li><li><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target="_blank" ><img src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg" /></a></li><li><img 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 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 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 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 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 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 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><h2>cont3</h2><ul><li><img 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 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 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 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 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 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 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 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 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 src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://b.hiphotos.baidu.com/image/w%3D310/sign=f3ef9fa4e9c4b7453494b117ffd1e78/0bd162d9f2d3572ce86585518813632763d0c3bc.jpg" /></li><li><img 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 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 pair getElementsByClassNameif (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 load function loadImg(imgClass,imgSrc){//data-src: The path to store the image to be loaded var arrImg=document.getElementsByClassName(imgClass); //I need to load the image array with class imgClass 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>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, rather than loading it from top to bottom). The picture must 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 the loading is triggered when window.onload and window.onscroll are all triggered.
<!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 loading in real time</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><a href="http://www.cnblogs.com/xiaomou2014"><img src="http://pic.cnitblog.com/avatar/356740/20140716231521.png"></a><a href="http://www.cnblogs.com/xiaomou2014">http://www.cnblogs.com/xiaomou2014</a></div><div><div><h2> A 19-year-old girl with advanced cancer who had amputated 7 years ago</h2><p>http://www.cnblogs.com/xiaomou2014</p><img src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://b.hiphotos.baidu.com/image/w%3D310/sign=f3ef9fa4e9c4b7453494b117ffd1e78/0bd162d9f2d3572ce86585518813632763d0c3bc.jpg" /><p>http://www.cnblogs.com/xiaomou2014</p><img src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://a.hiphotos.baidu.com/image/w%3D310/sign=30a6338deb24b899de3c7f395e071d59/0b46f21fbe096b63eeba47dd0e338744eaf8ac9f.jpg" /><p>http://www.cnblogs.com/xiaomou2014</p><img src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://g.hiphotos.baidu.com/image/w%3D310/sign=75a14ae060d9f2d3201122ee99ec8a53/500fd9f9d72a60592b78941b2a34349b033bba42.jpg" /><p>A 19-year-old advanced cancer girl with amputation 7 years ago</p><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target="_blank" ><img src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" /></a><p>A 19-year-old girl with advanced cancer who had amputated 7 years ago</p><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target="_blank" ><img src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.jpg" /></a><p>A 19-year-old girl with advanced cancer who had amputated 7 years ago</p><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target="_blank" ><img src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg" /></a><p>A 19-year-old girl with advanced cancer who had amputated 7 years ago</p><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target="_blank" ><img src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg" /></a><p>A 19-year-old girl with advanced cancer who had amputated 7 years ago</p><a href="http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target="_blank" ><img src="http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src="http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg" /></a></div><div></div><script>//Compatible with IE pair getElementsByClassNameif (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 loading function loadImg(imgClass,imgSrc){//data-src: The path to store the image that needs to be loaded var arrImg=document.getElementsByClassName(imgClass); //The image array with class imgClass class 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>