Parcourez de grands sites Web, en particulier des images avec plus d'images, telles que de grands sites Web de commerce électronique. Vous constaterez que le premier écran est en dehors du premier écran. Les images sont chargées lors du défilement vers le bas. Il n'est pas nécessaire de charger toutes les photos au début. De cette façon, la vitesse d'ouverture du Web est considérablement améliorée. Voici les idées auxquelles l'auteur a pensé à l'heure actuelle. Si vous avez une meilleure idée, j'espère que vous me donnerez quelques conseils.
En fait, l'idée d'images de chargement en temps réel est très simple. Lorsque la page commence à se charger, les images qui n'ont pas besoin d'être chargées depuis le début (comme les images ci-dessous du deuxième écran, vous devez faire défiler vers le bas pour les voir de toute façon. data-src = "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" />, src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" est une image gif transparente de 1px * 1px. L'attribut personnalisé "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" est le chemin de l'image. Lorsque vous faites défiler jusqu'à celui-ci, remplacez la valeur dans Data-Src par la valeur de SRC, puis supprimez l'attribut Data-Src ...
Ce qui suit est la démo
<! 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"> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <tone> js charge d'image en temps réel </ title> <style> * {padding: 0; marge: 0;}. wp {largeur: 1000px; marge: 5px automatique; rembourrage: 10px 0; Border-Bottom: 1px solide #dedede; Overflow: Hidden;} ul li {affichage: bloc; Largeur: 250px; flottant: à gauche; marge: 5px 0; Style de liste: aucun;}. AIMG {affichage: bloc; hauteur: 300px; largeur maximale: 348px; Border: 1px solide #eee; Contexte: URL (http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) NO-Repeat Center Center;} </pyle> </ head> <body> <v> <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 L'image commençant par le début est chargée en temps réel </ div> <v> <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/bba1cd11728b47108b5bc5c1cec3fdfc032346.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/a9d3fd1f4134970a9d2d2697cad1c8a7865d18.jpg" /> </li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=22e5b431bc096b63811958513c328733/ac345982b2b7d0a22457783c9ef76094b369a15.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/adaf2edda3cc7cd9e81d13883b01213fb80e91a.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/b151f8198618367a.jpg" /> </li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=2c2009a6d01b0ef46ce89e5fedc651a1/b219ebc4b74543a90ac4bb441c178a82b801145e.jpg" /> </a> </ul> </ div> <v> <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/4190642_0. > <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# > <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/a8773912b31bb051b4ef3a79347adab44BeDeDe09c.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/d62a6059252dd42a007e1c62013b5bb5c8aB887.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/f703738da9777ae2fa.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/d000baaa1cd11728baab06e25cafc3cec3fd2c1c.jpg" /> </ 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/3c6d55fbb2fb43168dce1a67222a4462308f7d3de.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/0bd162d9f2d3572ce8658518813632763d0c3b.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/0b46f21fbe096b63eeba47dd0e338744aaf8ac9f.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 avec 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; }} // Fonction de charge d'image LoadImg (imgClass, imgsrc) {// data-src: le chemin pour stocker l'image à charger var arrimg = document.getElementsByClassName (imgClass); // J'ai besoin de charger le tableau d'image avec la classe imgClass dans la fenêtre en temps réel. 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>Par exemple, les images de Cont1 dans la démo ci-dessus sont affichées dès que la page est chargée. La disposition de la page d'accueil est fixe. Vous pouvez confirmer que ces images sont en dessous du deuxième écran. Cependant, pour la page de contenu, l'emplacement des images dans le conteneur de contenu principal est incontrôlable. Cela nécessite que lorsque la page réelle est chargée, il est déterminé s'il se trouve dans la plage visuelle. S'il se trouve dans la plage visuelle, il est chargé (bien sûr, la page d'accueil peut également le faire, mais si la vitesse Internet est très lente, lors de l'ouverture de la page d'accueil, vous devez attendre que l'architecture entière de la page soit chargée avant que l'image ne soit affichée, au lieu de la charger de haut en bas). L'image doit être définie sur les attributs de largeur et de hauteur, ce qui lui permet d'occuper une position sur la page, sinon il n'occupera que la taille de l'image GIF transparente avant le chargement.
La démo suivante a apporté quelques modifications à la page de contenu, et le chargement est déclenché lorsque la fenêtre.onload et la fenêtre.
<! 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"> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <tone> js charge d'image en temps réel </ title> <style> * {padding: 0; marge: 0;}. wp {largeur: 1000px; marge: 5px automatique; rembourrage: 10px 0; Border-Bottom: 1px solide #dedede; Overflow: Hidden;}. fl {largeur: 700px; rembourrage: 25px; flottant: à gauche; Border: 1px solide #dedede; hauteur de ligne: 40px; Overflow: Hidden;}. Fr {largeur: 220px; hauteur: 800px; flottant: à droite; Background-Color: #dedede;}. AIMG {affichage: bloc; largeur maximale: 700px; marge: 0 auto; Contexte: URL (http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) NO-Repeat Center Center;} </pyle> </ head> <body> <v> <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> </v> <div> <div> <h2> Une fille de 19 ans atteinte d'un cancer avancé qui avait ampuré 7 ans il y a </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/0bd162d9f2d3572ce8658518813632763d0c3b.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/0b46f21fbe096b63eeba47dd0e338744aaf8ac9f.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" Cancer Girl with Amputation il y a 7 ans </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> Une fille de 19 ans atteinte d'un cancer avancé qui avait amputé il y a 7 ans </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> Une fille de 19 ans atteinte d'un cancer avancé qui avait amputé il y a 7 ans </p> <a <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> Une fille de 19 ans atteinte d'un cancer avancé qui avait amputé il y a 7 ans </p> <a <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> Une fille de 19 ans atteinte d'un cancer avancé qui avait amputé il y a 7 ans </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> <v> </div> <cript> // Compatible avec ie pair getElementsByClassNameif (Navigator.Appname == 'Microsoft Internet Explorateur') {DocumentyLeletel. = fonction () {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; }} // Fonction de chargement d'image LoadImg (imgClass, imgsrc) {// data-src: le chemin pour stocker l'image qui doit être chargée var arrimg = document.getElementsByClassName (IMGClass); // Le tableau d'image avec la classe ImgClass doit être chargé en temps réel pour (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] .RemoVaTTrribute (imgsrc)); window.onLoad = window.onscroll = function () {loveImg ("AIMG", "Data-Src")} </cript> </ body> </html>