Navegue por sites grandes, especialmente fotos com mais fotos, como grandes sites de comércio eletrônico. Você descobrirá que a primeira tela está fora da primeira tela. As fotos são carregadas ao rolar para baixo. Não há necessidade de carregar todas as fotos no início. Dessa forma, a velocidade de abrir a web é bastante aprimorada. A seguir, são apresentadas as idéias que o autor pensou atualmente. Se você tiver uma ideia melhor, espero que me dê alguns conselhos.
De fato, a idéia de imagens em tempo real é muito simples. 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.qzonsyle.gtimg.cn/ac/b.gif" é um transparent GIF O atributo personalizado "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg" é o caminho da imagem. Ao rolar para baixo, substitua o valor no Data-SRC pelo valor do SRC e remova o atributo Data-SRC ...
A seguinte é a demonstração
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> js carregamento de imagem no tempo real </title> <estilo> <estilo>**; margem: 0;}. wp {largura: 1000px; margem: 5px automático; preenchimento: 10px 0; fundo da fronteira: 1px sólido #dedede; Overflow: Hidden;} ul li {display: block; Largura: 250px; flutuar: esquerda; margem: 5px 0; estilo de lista: nenhum;}. Aimg {display: block; Altura: 300px; MAX-LUDA: 348PX; borda: 1px sólido #eee; Antecedentes: URL (http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) Centro de No-Repeat; src = "http://pic.cnitblog.com/avatar/356740/20140716231521.png"> </a> <a href = "http://www.cnblogs.com/xiaomou2014"> http://www.cnblogs.com/xiaomou2014 </a> cont2 A imagem que começa com o começo é carregada em tempo real </div> <div> <h2> cont1 </h2> 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/C83D70CF3BC79F3D8CD19A31B8A1B8A1B8ACF3CF3BC79F3D8CD19A31B8A1B8A. /> </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/adaf2edda3cd9e81d13883b01213fbbB. /> </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/b151f819818367a4e593d2222222222131313131313131313131F81F81F81B.B.B.B.B.B1F81F81F81F81B1B.B191F81B1F81B1F81B1F81B1F81B1B1F81B1F81B1F81B1F81B1B1F81B1F81B1AB1AB151F81F81B1F81B.B.P. /> </li> <li> <img src = "http://a.hiphotos.baidu.com/image/w%3D310/sign=2C2009A6D01B0EF46CE89E5FEDC651A1/B219EBC4B7443A110AC4BB417P. /> </a> </ul> </div> <div> <h2> cont2 </h2> <ul> <li> <a href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" Target = "_braw src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y3.ifengimg.com/a/2014_37/03c4830691d.jpg"/> </a> href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" Target = "_ blank"> <img src = "http://ctc.qzonsyle.gtimg.cn/ac/b.g.gf. data-src = "http://y2.ifeng.com/a/2014_37/89ed5c7eff33abf.jpg"/> </a> </li> <li> <a href = "http://news.ifeng.com/A/A20140909/4194442.) > <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://y2.ifengimg.com/a/2014_37/d4dbca6b9b7.jpg"/> <aa> href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" Target = "_ blank"> <img src = "http://ctc.qzonsyle.gtimg.cn/ac/b.g.gf. 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/b249183330932.jpg"/> <a-a> 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/a873912b31bb051b4f3a79347373739121bb051b4p3a79347373739121bb051b4f3a7934777373912bb051b4f3a7934737373912bb051b4F3a7934737373912bb051B4F3A79477AR /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3d310/sign=9d833f1b950a304e5222a6fbe1c9a7c3/d1160924ab8972bb49bd5e4Cd7B7B8B8B8B1. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3D310/sign=4a93DA2A552C11DFDED1B92253266255/D62A605922DD42A007E1E1S /> </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/f703737777391274b38fc4fc4b. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hiphotos.baidu.com/image/w%3d310/sign=53e69395b8a1cd1105b674218913c8b0/ac4bd113f08202f195e69a49a49fbed/acd113f08202f195e69a49a49a49bfd0bbd13F08202f1f1913c8b0bfd0bbfbfd. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://h.hiphotos.baidu.com/image/w%3d310/sign=3749c38a4334970a4773162ea5cbd1c0/5366d010924ab1608b1a9237236d1d10924ab1608bd12372d1d1d1d1bd1bd123bd1fae6d1d1d1a923bd1fake6d1d1bd1bd1bd1d1d1d1d1bd1fake6d1d1d1d1a92bd1fae6d. /> </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/CDBF6C81800A19D88E30C9083FFA82820A131FC93FA820A830C93FA830C93FCA820A. /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://d.hiphotos.baidu.com/image/w%3D310/sign=539b0d21347adab43dd01d42bbd5b36b/54fbb2fb43166d22e4c8b36b/54fb2fb2f. /> </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/0bd162d9f2d3572ce86585518813636362d92d3d3572ce8658551881363636362d92d3572CE86585518813636363630 /> </li> <li> <img src = "http://ctc.qzonestyle.gtimg.cn/ac/b.gif" data-src = "http://a.hiphotos.baidu.com/image/w%3D310/sign=30A6338DEB24B899DE3C7F395E071D59/0B46F21FBE096B63EEBA47DD0E337777333396395EAPTCAPTROD59733F21FBE096B63EEBA47DD0E33773 /> </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> <cript> // compatível com o par 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 (); para (var i = 0; i <objar.Length; i ++) {if (objarr [i] .className == argumentos [0]) {Trobj.push (objarr [i]); }} retornar TROBJ; }} // Função de carga de imagem carregamento (imgclass, imgsrc) {// data-src: o caminho para armazenar a imagem a ser carregada varrimg = document.getElementsByclassName (imgclass); // eu preciso carregar a matriz de imagem com a classe imgclass na janela em tempo real.onscroll = function () {for (var i = 0; i <arrrimg.length; i ++) {if (! Arrimg [i] .getAttribute (imgsrc)) continua; if (document.documentElement.scrolltop+document.body.scrolltop+document.documentElement.clientHeight > arrimg [i] .offSettop) {arrrimg [i] .SetAttribute ("src", arrrimg [i] .getAttribute (imgsrc)); arrimg [i] .removeattribute (imgsrc);}}}} loadiMg ("Aimg>" "-src);Por exemplo, as imagens em cont1 na demonstração acima são exibidas assim que a página for carregada. O layout da página inicial é fixo. Você pode confirmar que essas fotos estão abaixo da segunda tela. No entanto, para a página de conteúdo, a localização das imagens no contêiner principal de conteúdo é incontrolável. Isso requer que, quando a página real é carregada, é determinado se eles estão dentro do intervalo visual. Se estiver dentro do intervalo visual, ele será carregado (é claro, a página inicial também pode fazer isso, mas se a velocidade da Internet for muito lenta, ao abrir a página inicial, você precisará esperar até que a arquitetura inteira seja carregada antes que a imagem seja exibida, em vez de carregá -la de cima para baixo). A imagem deve ser definida como atributos de largura e altura, o que permite ocupar uma posição na página, caso contrário, ela ocupará apenas o tamanho da imagem transparente do GIF antes de carregar.
A demonstração a seguir fez algumas modificações na página de conteúdo e o carregamento é acionado quando a janela.onload e a janela.Onscroll são todos acionados.
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> js carregamento de imagem no tempo real </title> <estilo> <estilo>**; margem: 0;}. wp {largura: 1000px; margem: 5px automático; preenchimento: 10px 0; fundo da fronteira: 1px sólido #dedede; Overflow: Hidden;}. FL {Width: 700px; preenchimento: 25px; flutuar: esquerda; borda: 1px sólido #dedede; altura da linha: 40px; Overflow: Hidden;}. Fr {Width: 220px; Altura: 800px; Float: Certo; Background-color: #dedede;}. Aimg {display: block; MAX-LUDA: 700PX; margem: 0 automático; Antecedentes: URL (http://ctc.qzs.qq.com/aoi/img/icenter/loading.gif) Centro de No-Repeat; 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> uma garota de 19 anos com câncer avançado que teve 7 anos de idade atrás </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/0bd162d9f2d3572ce86585518813636362d92d3d3572ce8658551881363636362d92d3572CE86585518813636363630 /><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/0B46F21FBE096B63EEBA47DD0E337777333396395EAPTCAPTROD59733F21FBE096B63EEBA47DD0E33773 /><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 Garota do câncer com amputação há 7 anos data-src = "http://y3.ifengimg.com/a/2014_37/03c4830691a6d8b.jpg"/> </a> <p> Uma menina de 19 anos com câncer avançado que amputou 7 anos atrás </p> <A href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" Target = "_ blank"> <img src = "http://ctc.qzonsyle.gtimg.cn/ac/b.g.gf. data-src = "http://y2.ifengimg.com/a/2014_37/89ed5c7eff33abf.jpg"/> </a> <p> Uma garota de 19 anos com câncer avançado que amputou 7 anos atrás href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" Target = "_ blank"> <img src = "http://ctc.qzonsyle.gtimg.cn/ac/b.g.gf. data-src = "http://y2.ifengimg.com/a/2014_37/d4dbca6004ab9b7.jpg"/> </a> <p> Uma garota de 19 anos com câncer avançado que amputou 7 anos atrás href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" Target = "_ blank"> <img src = "http://ctc.qzonsyle.gtimg.cn/ac/b.g.gf. data-src = "http://y3.ifengimg.com/a/2014_37/9349a4b2ee9030309.jpg"/> </a> <p> Uma menina de 19 anos com câncer avançado que amputou 7 anos atrás href = "http://news.ifeng.com/a/20140909/41906442_0.shtml#p=1" Target = "_ blank"> <img src = "http://ctc.qzonsyle.gtimg.cn/ac/b.g.gf. data data-src = "http://y2.ifengimg.com/a/2014_37/b2491836e230932.jpg"/> </a> </div> <div> </div >pname [script> // compatível com ie par getElementsByClassNameif (Navigator.Apgator> {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 (); para (var i = 0; i <objar.Length; i ++) {if (objarr [i] .className == argumentos [0]) {Trobj.push (objarr [i]); }} retornar TROBJ; }} // Função de carregamento de imagem LoadImg (imgclass, imgsrc) {// data-src: o caminho para armazenar a imagem que precisa ser carregada varrimg = document.getElementsbyclassName (imgclass); // A matriz de imagens com classe imgclass precisa ser carregada em tempo real para (var i = 0; i <arrrimg.length; i ++) {if (! Arrrimg [i] .getAttribute (imgsrc)) continue; if (document.documentElement.Scrolltop+document.body.scrolltop+document.documentElement.clientHeight> arrrimg [i] .offsetTop) {Arrimg [i] .setAttribute ("src", arrimg [i] .getTribute (imgsrc); window.onload = window.onscroll = function () {loadImg ("AIMG", "Data-src")} </script> </body> </html>