Explore los sitios web grandes, especialmente las imágenes con más imágenes, como grandes sitios web de comercio electrónico. Encontrará que la primera pantalla está fuera de la primera pantalla. Las imágenes se cargan al desplazarse hacia abajo. No hay necesidad de cargar todas las imágenes al principio. De esta manera, la velocidad de abrir la web mejora enormemente. Las siguientes son las ideas que el autor ha pensado en la actualidad. Si tienes una mejor idea, espero que me dé algunos consejos.
De hecho, la idea de las imágenes de carga en tiempo real es muy simple. Cuando la página comienza a cargarse, las imágenes que no necesitan cargarse desde el principio (como las imágenes debajo de la segunda pantalla, debe desplazarse hacia abajo para verlas de todos modos. Es mejor establecerlas para cargar en tiempo real al desplazarse hacia abajo) a una propiedad personalizada, como: <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" es una imagen gif de transparente de 1px*1px. El atributo personalizado "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" es la ruta de la imagen. Al desplazarse hacia abajo, reemplace el valor en Data-Src con el valor de SRC, y luego elimine el atributo de datos de datos SRC ...
Lo siguiente es la demostración
< xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> JS Carga de imagen en tiempo real </title> <estilo>*{Padding: 0; margen: 0;}. wp {ancho: 1000px; Margen: 5px Auto; relleno: 10px 0; Border-Bottom: 1px Solid #dedede; desbordamiento: oculto;} ul li {display: block; Ancho: 250px; flotante: izquierda; margen: 5px 0; Estilo de lista: Ninguno;}. AIMG {Display: Block; Altura: 300px; MAX-WIDTH: 348PX; Border: 1px Solid #EEE; Antecedentes: URL (http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) sin-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 La imagen que comienza con el principio se carga en tiempo real </div> <div> <div> <h2> cont1 </h2> <li> <li> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ en blanco"> <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=19bb515ff1f4134e037037f151e95c1/b7fd5266d016092414bd8aedd60735fae7cd34af.jpg" " /> </li> <li> <img src = "http://g.hiphotos.baidu.com/image/W%3D310/sign=dbbeb83d4b540923aa69657fa258d1dc/b812c8fcc3cec3fdaaa0ce16bd488d43f879427f9.jpggg" "" /> </li> <li> <img src = "http://c.hiphotos.baidu.com/image/w%3D310/sign=8e78cf5936a85edffa8cf822795409d8/bba1cd11728b47108b5bc5c5c1cec3ffc032346.jpgg" " /> </li> <li> <img src = "http://e.hiphotos.baidu.com/image/W%3D310/sign=75538617df54564ee565e23883de9cde/c2cec3fdfc039245ea8f5b0b8594a4c27d1e25ff.jpgg" /> </li> <li> <img src = "http://d.hiphotos.baidu.com/image/w%3D310/sign=4e7eef2892ef76c6d0d2fd2aad17fdf6/a9d3fd1f4134970a9bed2697cad1c8a7865d18.jpg" " /> </li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3D310/sign=22e5b431bc096b63811958513c328733/ac345982b2b7d0a245777783c9ef76094b369a15.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/adef2edda3cc7cd9e81d13883b01213fb80e91aa.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/b151f8198618367a4e593d2c738bd4b21ce56a.jpg" " /> </li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3D310/sign=2c2009a6d01b0ef46ce89e5fedc651a1/b219ebc4b74543a90ac4bb441c178a82b80145e.jpg" " /> </a> </ul> </div> <div> <h2> cont2 </h2> <ul> <li> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" objetivo = "_ en blanco"> <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 href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ en blanco"> <img src = "http://ctc.qzonestyle.gtimg.cnac/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.shtml#p/" > <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9ab7.jpg"/> </a> </li> <li> <a a a a que href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ en blanco"> <img src = "http://ctc.qzonestyle.gtimg.cnac/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.0.0.0.p/" > <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/86d6277f9e2f07089c207d0eb24b899a901f297.jpg "je /> </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.jpgg" " /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://f.hiphotos.baidu.com/image/w%3D310/sign=8c009502257f9e2f70351b092f31e962/99222720e0cf3d7ca56401892f01fbe096a63a999b.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/a1ec08fa513d269759c20d5657fbbb43166d8a3.jpggg" " /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w%3D310/sign=9ce0b545a918972ba33a06cbd6cc7b9d/a87773912b31bbb051b4ef3a79347adab4444bede099c.c.ccg" "" " /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3D310/sign=9d833f1b950a304e522a6fbe1c9a7c3/d1160924ab18972bb49b4bd5e4cd7b899e510a0f.jpggg" " /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3D310/sign=4a93da2a552c11dfded1b922532666255/d62a6059252dd42a007e1c62013b5bbbb5c8eab887.jpg" "j "" JEJ "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" " /> </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/f703738da977391274b38fc4fa19861837777ae2fagg" /> </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.Jpgg" /> </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.jpg" " /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://e.hiphotos.baidu.com/image/w%3D310/sign=8563bf5757fbbb2fb342b5e137f4b2043/3b87e950352ac65cccb5d179f9f2b21193138a0c.c.C. /> </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.jpggg" "" /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hiphotos.baidu.com/image/w%3D310/sign=539b0d21347adab43dd01d42bbd5b36b/54fbbbb2fb43166d2e4c8ab9d442309f79052d278.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/3c6d55fbbb2fb43168dce1a6722a4462308f7d3de.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.jpggg" "jpg "" "" "" "" "" " /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/W%3D310/sign=30a63338deb24b899de3c7f395e071d59/0b46f21fbe096b63eebeba47dd0e3387444eaf8ac9f.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.jpgg" "" /> </li> </ul> </div> <script> // compatible con el par de IE getElementsByClassNameif (navigator.appname == 'Microsoft Internet Explorer') {document.getElementsByClassName = function () {var ttagName = "*"; if (argumentos.length> 1) {ttagName = argumentos [1]; } if (argumentos.length> 2) {var pobj = argumentos [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 == argumentos [0]) {Trobj.push (objarr [i]); }} return Trobj; }} // función de carga de imagen LoadImg (imgClass, imgsrc) {// data-src: la ruta para almacenar la imagen a cargar var aRiMg = document.getElementsByClassName (imgClass); // Necesito cargar la matriz de imágenes con la clase imgClass en la ventana de tiempo real.onscroll = function () {for (var i = 0; i <arrimg.length; i ++) {if (! ArriMg [i] .getAttribute (imgsrc)) continuar; if (document.documentelement.scrolltop+document.body.scrolltop+document.documentelement.clientHeight > arriMg [i] .OffSettop) {arriMg [i] .setTribute ("src", arriMg [i] .getAttribute (imgsrc)); arriMg [i] .removeeattribute (imgsrc);}}}} loadimg ("AIMG", "DATA-SRC"); </script> <script <</script </body> </body> </body> </Httml>Por ejemplo, las imágenes en Cont1 en la demostración de arriba se muestran tan pronto como se carga la página. El diseño de la página de inicio es fijo. Puede confirmar que esas imágenes están debajo de la segunda pantalla. Sin embargo, para la página de contenido, la ubicación de las imágenes en el contenedor de contenido principal es incontrolable. Esto requiere que cuando se cargue la página real, se determina si están dentro del rango visual. Si está dentro del rango visual, está cargado (por supuesto, la página de inicio también puede hacerlo, pero si la velocidad de Internet es muy lenta, al abrir la página de inicio, debe esperar hasta que toda la arquitectura de la página se cargue antes de que se muestre la imagen, en lugar de cargarla de arriba a abajo). La imagen debe establecerse en atributos de ancho y altura, lo que le permite ocupar una posición en la página, de lo contrario solo ocupará el tamaño de la imagen GIF transparente antes de cargar.
La siguiente demostración ha realizado algunas modificaciones en la página de contenido, y la carga se activa cuando Window.
< xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> JS Carga de imagen en tiempo real </title> <estilo>*{Padding: 0; margen: 0;}. wp {ancho: 1000px; Margen: 5px Auto; relleno: 10px 0; Border-Bottom: 1px Solid #dedede; desbordamiento: oculto;}. fl {ancho: 700px; relleno: 25px; flotante: izquierda; borde: 1px sólido #dedede; Línea de altura: 40px; desbordamiento: oculto;}. fr {ancho: 220px; Altura: 800px; flotante: correcto; Color de fondo: #dedede;}. AIMG {display: block; Max-Width: 700px; margen: 0 auto; Antecedentes: URL (http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) sin-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> una niña de 19 años con cáncer avanzado que había ampitado 7 años Hace </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.jpggg" "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=30a63338deb24b899de3c7f395e071d59/0b46f21fbe096b63eebeba47dd0e3387444eaf8ac9f.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 hace 7 años </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ en blanco"> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.g.g.gi data-src = "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"/> </a> <p> Una niña de 19 años con cáncer avanzado que había amputado hace 7 años </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ en blanco"> <img src = "http://ctc.qzonestyle.gtimg.cnac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.jpg"/> </a> <p> una niña de 19 años con cáncer avanzado que había amputado hace 7 años </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ en blanco"> <img src = "http://ctc.qzonestyle.gtimg.cnac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg"/> </a> <p> una niña de 19 años con cáncer avanzado que había amputado hace 7 años </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ en blanco"> <img src = "http://ctc.qzonestyle.gtimg.cnac/b.gif" data-src = "http://y3.ifengimg.com/a/2014_37/9349a4b2ee90309.jpg"/> </a> <p> una niña de 19 años con cáncer avanzado que había amputado hace 7 años </p> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" target = "_ en blanco"> <img src = "http://ctc.qzonestyle.gtimg.cnac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg"/> </a> </div> <div> </div> <script> // Compatible con IE getElementsByClassNameif (navigator.appname == Microsoft Internet ') = function () {var ttagName = "*"; if (argumentos.length> 1) {ttagName = argumentos [1]; } if (argumentos.length> 2) {var pobj = argumentos [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 == argumentos [0]) {Trobj.push (objarr [i]); }} return Trobj; }} // función de carga de imagen LoadImg (imgclass, imgsrc) {// data-src: la ruta para almacenar la imagen que debe cargarse var arreRiMg = document.getElementsByClassName (imgClass); // La matriz de imágenes con la clase IMGClass de clase debe cargarse en tiempo real para (var i = 0; i <arrimg.length; i ++) {if (! AriMg [i] .getAttribute (imgsrc)) continuar; if (document.documentelement.scrolltop+document.body.scrolltop+document.documentelement.clientHeight > ArriMg [i] .OffSettop) {arriMg [i] .SetTribute ("src", arriMg [i] .getAttribute (imgsrc)); arrrimg [i] .removeattribute (imgsrc);}}} Window.Onload = Window.onscroll = function () {LoadImg ("AIMG", "Data-Src")} </script> </body> </html>