JS Bild Echtzeit Laden bietet Webseiten Öffnungsgeschwindigkeit

Autor：Eve Cole Aktualisierungszeit：2025-04-07 03:32:01

Durchsuchen Sie große Websites, insbesondere Bilder mit weiteren Bildern, wie z. B. große E-Commerce-Websites. Sie werden feststellen, dass sich der erste Bildschirm außerhalb des ersten Bildschirms befindet. Die Bilder werden beim Scrollen geladen. Am Anfang müssen nicht alle Bilder geladen werden. Auf diese Weise wird die Geschwindigkeit der Öffnung des Netzes erheblich verbessert. Das Folgende sind die Ideen, an die der Autor derzeit gedacht hat. Wenn Sie eine bessere Idee haben, hoffe ich, dass Sie mir einige Ratschläge geben.

Tatsächlich ist die Idee des Echtzeit-Ladens von Bildern sehr einfach. Wenn die Seite mit dem Laden beginnt, müssen die Bilder, die von Anfang an nicht geladen werden müssen (wie die Bilder unter dem zweiten Bildschirm, nach unten scrollen, um sie trotzdem zu sehen. Es ist besser, sie in Echtzeit zu laden, wenn sie nach unten scrollen) in eine individuelle Eigenschaft wie: <img Src = "http:/ctc.qzonestyle.gimg.cn/cn/b.gif" ". data-src = "http://y3.Ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"/>, src = "http://ctc.qzonestyle.gtimg.cn/b.gif" ist ein transparentes Bild von 1px*1px. Das benutzerdefinierte Attribut "http://y3.Ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" ist der Pfad des Bildes. Ersetzen Sie beim Scrollen den Wert in der Daten-SRC durch den Wert von SRC und entfernen Sie dann das Daten-SRC-Attribut ...

Das Folgende ist die Demo

 <! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> JS Image Lade in realer Zeit </title> </title> </title> </title> <style> <style> <style> Rand: 0;}. Wp {Breite: 1000px; Rand: 5px Auto; Polsterung: 10px 0; Grenzboden: 1PX Solid #dedede; Überlauf: versteckt;} ul li {display: block; Breite: 250px; float: links; Rand: 5px 0; Listenstil: Keine;}. AIMG {Anzeige: Block; Höhe: 300px; Max-Breite: 348px; Grenze: 1PX Solid #eee; Hintergrund: URL (http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) No-Repeat Center; src = "http://pic.cnitblog.com/avatar/356740/20140716231521.png"> </a> <a href = "http://www.cnblogs.com/xiaomou2014"> http://www.cnblogs.com/xiaomou2014 </a> cont2 Das Bild beginnt mit dem Beginn in Echtzeit </div> <h2> cont1 </h2> <li> <li> <a> <a> <a> <a> <a> <a> <a> <a </h2> <li> <a> <a <a. href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ leer"> <img src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=e0e3bb2e38292df597c3aa148c315ce2/c83d70cf3bc79f3d8cd19a31b8a1b8a1b8a1b8a1b8a1b8a1b8a1cd11728b29fa.jpt /> </a> </li> <li> <img src = "http://h.hiphotos.baidu.com/image/w%3d310/sign=19bb515ff1f4134e037037f151e95c1/b7fd5266d016092414bd8aedD60735fae7cd34af. /> < /li> <li> <img src = "http://g.hiphotos.baidu.com/image/w%3d310/sign=dbbeb83d4b540923aa69657fa258d1dc/b812c8fcc3cec3fdaa0ce16bd488d43f879427f9. /> </li> <li> <img src = "http://c.hiphotos.baidu.com/image/w%3d310/sign=8e78cf5936a85edffa8cf822795409d8/bba1cd11728b47108b5b5b5c5c1cec3fdfc3fdfc032346. JPGG" /> < /li> <li> <img src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=75538617DF54564EE565E23883DE9CDE/C2CEC3FDFC039245FLGG" /> < /li> <li> <img src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=4e7eef2892ef76c6d0d2fd2aad17fdf6/a9d3fd1f4134970a9Bed2d2697cad1c8a7865d18.jpgG" /> </li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=22e5b431bc096b63811958513c3287333/ac345982B2B7D0A224577783c9ef76094b369a15.jpg" /> < /li> <li> <img src = "http://g.hiphotos.baidu.com/image/w%3d310/sign=d76eb55fb3353faf5b6952f98d2fdca/ac6eddc451da81cbf76db /> < /li> <li> <img src = "http://f.hiphotos.baidu.com/image/w%3d310/sign=7f41436edbf9d72a1764161ce42a282a/adaf2edda3cc7e81d1383b01213fb80e /> </li> <li> <img src = "http://b.hiphotos.baidu.com/image/w%3d310/sign=d1e3fa4567380CD7E61EEC9145AD14/AE51F3DEB48F8C54F573C0DA3829292929292929292df5e1fe7fa6.jp. /> < /li> <li> <img src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=03c6a3c737fae6cd0cb4Ad603fb10f9e/b151f8198618367a4e593d2c738bd4b21ces56a.593D2D2C738bd4b21Ces56a. /> < /li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=2C2009A6D01B0EF46CE89E5FEDC651A1/B219EBC4B74543A90AC4BB441C1782B801145E. /> </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 "> <img"> <img "> <img"> <img "> <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> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> </ href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ leer"> <img src = "http://ctc.qzonestyle.gimg.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/4190642_0.0.0.0.0.0642_0.0.0.0.0.0.0.0642_0.0.0.0.0.0.0.0.0642_0.0.0.0.0.0.0.0.0.0.0642_0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.2. ><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 = "_ leer"> <img src = "http://ctc.qzonestyle.gimg.cn/ac/b.gif" data-src = "http://y3.Ifengimg.com/a/2014_37/9349a4b2ee90309.jpg"/> </a> </li> <li> <a href = "http:/ ><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/86d6277f9e2f07089c207d07d0aB24b24b24b24b89a901F2401F24. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=3629f39bad51f3dec3b2bf65a4eff0ec/94cad1c8a786c917d4016968cb3d70cf3bc7644444. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://f.hiphotos.baidu.com/image/w%3d310/sign=8c009502257f9e2f70351b092f31e962/9922720e0cf3d7ca56401892f01f01f096a6a9b.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/a1ec08fa513d269759c20d567fbb2fb4316d8a3. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=9ce0b545a918972ba3a06CBD6CC7B9D/A8773912B31BB051B4F3A79347ADAB4444444BEDE09C. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=9d833f1b950a304e522a6fbe1c9a7c3/d1160924ab18972bb49b4bd5e4cd7b89e510a0a0f. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=4a93da2a552c11dfded1b92253266255/d62a6059252dd42a007e1c62013b5b5c8aB8887. /> </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/f703738da977391274b38fa19861837a. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=53e69395b8a1cd1105b674218913c8b0/ac4bd11373f02f1959a49fBfbfbf641B0B0B0B0B0B0B0B0B0B. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://h.hiphotos.baidu.com/image/w%3d310/sign=3749c38a434970a4773162ea5CBD1C0/5366D0160924AB1808B1EA9237FAE6CD7A890BEB. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w%3d310/sign=8563bf5757fb2fb342b5e137f4b2043/3b87e950352AC65CCB5D179f9f2b211193138a0c. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://f.hiphotos.baidu.com/image/w%3d310/sign=74856B065E6034A829E2BE80FB1249D9/D000BAA1CD1CD1CD1CD1C1C1C1C1C1C1C1C1C1C1C1C1C1C1C. src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://c.hiphotos.baidu.com/image/w%3d310/sign=49E222CDA34D12F2ECE05A8617FC2D5FF/CDBF6C81800A19D88E30C90831FA828BA61E468F. /> </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/4AFBFBEDAB64034F9195FD08ADC379310A5551D67.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/3c6d55fb2Fb43168dce1a6722a4462308f7d3dceCe1a6722a4462308f7d3dceCe1a6722a4462308f7d3dceCe1a6722a4462308f7d3dceCE /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://b.hiphotos.baidu.com/image/w%3d310/sign=f3ef9fa4e9c4b7453494b117ffd1e78/0bd162d9f2d3572ce865518813332763d0c3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=30A638DEB24B899DE3C7F395E071D59/0B46F21FBE096B63EEBA47DDDD0E3387444444444444444444444444444444444444444444444444444444. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://g.hiphotos.baidu.com/image/w%3d310/sign=75A14AE060D9F2D3201122EE99EC8A53/500FD9F9D72A60592B78941B2A349B03BBA42.JPG" /> </li> </ul> </div> <script> // kompatibel mit IE -Paar GetElementsByClassNameIF (Navigator.Appname == 'Microsoft Internet Explorer') {document.getElementsByClassName = function () {var ttagname = "*; if (argumente.length> 1) {tagname = argumente [1]; } if (argumente.length> 2) {var pobj = argumente [2]} else {var pobj = document; } var objarr = pobj.getElementsByTagName (tagname); var trobj = new Array (); für (var i = 0; i <objarr.length; i ++) {if (objarr [i] .className == Argumente [0]) {trobj.push (objarr [i]); }} return trobj; }} // Bildlastfunktion LoadImg (IMGCASS, IMGSRC) {// data-src: Der Pfad zum Speichern des geladenen Bildes var arrimg = document.getElementsByClassName (IMGCLASS); // Ich muss das Bildarray mit der Klasse imgClass im Echtzeitfenster laden. 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);}}}}}} </html ("AIMGRC", "Data-SRC")

Beispielsweise werden die Bilder in Cont1 in der obigen Demo angezeigt, sobald die Seite geladen ist. Das Layout der Homepage ist festgelegt. Sie können bestätigen, dass diese Bilder unter dem zweiten Bildschirm liegen. Für die Inhaltsseite ist jedoch der Ort der Bilder im Hauptinhaltungscontainer unkontrollierbar. Dies erfordert, dass beim Laden der realen Seite festgelegt wird, ob sie sich im visuellen Bereich befinden. Wenn es sich im visuellen Bereich befindet, wird es geladen (natürlich kann die Homepage dies auch tun. Wenn die Internetgeschwindigkeit jedoch beim Öffnen der Homepage sehr langsam ist, müssen Sie warten, bis die gesamte Seitenarchitektur geladen wird, bevor das Bild angezeigt wird, anstatt es von oben nach unten zu laden). Das Bild sollte auf Breite und Höhenattribute eingestellt werden, die es ihm ermöglichen, eine Position auf der Seite zu besetzen, ansonsten wird es vor dem Laden nur die Größe des transparenten GIF -Bildes einnehmen.

Die folgende Demo hat einige Änderungen an der Inhaltsseite vorgenommen, und das Laden wird ausgelöst, wenn das Fenster und das Fenster und Fenster ausgelöst werden.

 <! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> JS Image Lade in realer Zeit </title> </title> </title> </title> <style> <style> <style> Rand: 0;}. Wp {Breite: 1000px; Rand: 5px Auto; Polsterung: 10px 0; Grenzboden: 1PX Solid #dedede; Überlauf: versteckt;}. fl {width: 700px; Polsterung: 25px; float: links; Grenze: 1PX Solid #dedede; Zeilenhöhe: 40px; Überlauf: versteckt;}. fr {width: 220px; Höhe: 800px; float: rechts; Hintergrundfarbe: #dedede;}. AIMG {Anzeige: Block; Max-Breite: 700px; Rand: 0 Auto; Hintergrund: URL (http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) No-Repeat Center; 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 vor </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/0bd162d9f2d3572ce865518813332763d0c3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc3bc /><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=30A638DEB24B899DE3C7F395E071D59/0B46F21FBE096B63EEBA47DDDD0E3387444444444444444444444444444444444444444444444444444444. /><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/500FD9F9D72A60592B78941B2A349B033BBA42. JPGG"/> 1B2A34349B033BBA4222./> Ph2A349b033bba42./> < Krebsmädchen mit Amputation vor 7 Jahren </p> <a href = "http://news.Ifeng.com/a/20140909/4190642_0.shtml#p=1" target = "_ Blank"> <img data-src = "http://y3.Ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"/> </a> <p> Ein 19-jähriges Mädchen mit fortgeschrittenem Krebs, das vor 7 Jahren amputiert hatte </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ leer"> <img src = "http://ctc.qzonestyle.gimg.cn/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.jpg"/> </a> <p> Ein 19-jähriges Mädchen mit fortgeschrittenem Krebs, das vor 7 Jahren amputiert hatte </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ leer"> <img src = "http://ctc.qzonestyle.gimg.cn/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg"/> </a> <p> Ein 19-jähriges Mädchen mit fortgeschrittenem Krebs, das vor 7 Jahren amputiert hatte </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ leer"> <img src = "http://ctc.qzonestyle.gimg.cn/ac/b.gif" data-src = "http://y3.Ifengimg.com/a/2014_37/9349a4b2ee90309.jpg"/> </a> <p> Ein 19-jähriges Mädchen mit fortgeschrittenem Krebs, das vor 7 Jahren amputiert hatte </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ leer"> <img src = "http://ctc.qzonestyle.gimg.cn/ac/b.gif" data-src = "http://y2.Ienengimg.com/a/2014_37/b2491836e230932.jpg"/> </a> </div> <div> </div> <Script> // kompatibel mit IE-Paar GetElementsByclassname.appator.Appname = function () {var tagname = "*"; if (argumente.length> 1) {tagname = argumente [1]; } if (argumente.length> 2) {var pobj = argumente [2]} else {var pobj = document; } var objarr = pobj.getElementsByTagName (tagname); var trobj = new Array (); für (var i = 0; i <objarr.length; i ++) {if (objarr [i] .className == Argumente [0]) {trobj.push (objarr [i]); }} return trobj; }} // Bildladefunktion LoadImg (IMGCASS, IMGSRC) {// data-src: Der Pfad zum Speichern des Bildes, das geladen werden muss var arrimg = document.getElementsByClassName (IMGCLASS); // Das Image -Array mit der Klassenklasse -Klasse muss in Echtzeit geladen werden für (var i = 0; i <arrimg.length; i ++) {if (! Arrimg [i] .getAtTribute (IMGSRC)) weiter; 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>