Ideas generales para la tecnología de retraso de imágenes
1. Ahora establezca la ruta SRC correspondiente al elemento IMG como la imagen de fondo, y la ruta de URL correspondiente al IMG se almacena en un atributo de autoestima (para el reemplazo de SRC).
2. Obtenga la altura del carrete y la altura de la ventana
3 El bucle requiere una carga retrasada de la matriz IMG, obtenga la altura de IMG y determine si el elemento está en la ventana visual. Si el elemento está en la ventana visible, se reemplaza SRC.
Aquí está el código de prueba
html
La copia del código es la siguiente:
<estilo>
.envoltura {
Margen: 20px Auto;
Ancho: 150px;
}
.wrap div {
borde: 1px punteado #E29808;
Altura: 30px;
Línea de altura: 30px;
Margen: 5px Auto;
Text-Align: Center;
Ancho: 150px;
}
.wrap .sortable {
Color de fondo: #E6D6AB;
borde: 1px sólido #E29808;
}
#showimg li {
Ancho: 30%;
margen izquierda: 2%;
margen-top: 15px;
Altura: 300px;
flotante: izquierda;
Antecedentes: #ccc;
}
#showimg li: nth-child (3n) {
margen-izquierda: 3%;
}
#showimg li img {
Ancho: 100%;
Max-altura: 100%;
}
</style>
</ablo>
<Body>
<div id = "showimg">
<li> <img src = "http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kfty.jpeg"/> </li>
<li> <img src = "http://cdn.duitang.com/uploads/item/201306/07/20130607171626_qkc3t.thumb.600_0.jpeg"/> </li>
<li> <img src = "http://i2.sinaimg.cn/gm/2011/0127/u5238p115dt20110127111837.jpg"/> </li>
</div>
</body>
parte js
La copia del código es la siguiente:
var imgsglobal = [
"http://cdn.duitang.com/uploads/item/201306/07/20130607171626_qkc3t.thumb.600_0.jpeg",
"http://img4.duitang.com/uploads/item/201306/07/20130607172438_teijr.jpeg",
"http://cdn.duitang.com/uploads/item/201306/08/20130608190311_bywca.thumb.600_0.jpeg",
"http://g-ec4.images-amazon.com/images/g/28/book-catalog/liaoxiaoJun/b003u5taty_01_amzn.jpg",,
"http://www.yishun.net/tuyysl3r1exnpbwcwnc50yw9iyw9jzg4uy29tl2ltz2v4dhjhl2k0lzc0mdy1mdazmi9uml9hbmvyanrhwfhywfhhfise3nda2nt awmznnt"
"http://www.yishun.net/tuyysl3r1Exnpbwcwmy50yw9iyw9jzg4uy29tl2ltz2v4dhjhl2kzlzc0mdy1mdazmi9umkvhbf9yavhjwfhywfhfise3nda2n tawm.jpn.jpn.jpni
"http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kfty.jpeg",
"http://img4.duitang.com/uploads/item/201304/29/20130429142901_sqjjv.thumb.600_0.jpeg",
"http://img4.duitang.com/uploads/item/201112/04/20111204170801_fibkm.jpg",
"http://img2.duitang.com/uploads/item/201211/06/20121106233027_ldqas.thumb.600_0.jpeg",
"http://i2.sinaimg.cn/gm/2011/0127/u5238p115dt20110127111837.jpg",
"http://img2.duitang.com/uploads/item/201209/24/20120924162953_hlpje.jpeg",
"http://wenwen.soso.com/p/20110624/20110624085901-745594320.jpg",
"http://img4.duitang.com/uploads/item/201206/15/20120615185646_uzmrt.thumb.600_0.jpeg",
"http://img4.duitang.com/uploads/item/201202/11/20120211213039_u4sj8.thumb.600_0.jpg",
"http://cdn.duitang.com/uploads/item/201201/25/20120125145922_n4vz8.thumb.600_0.jpg"
];
función addimgele () {
var str = '';
para (var i = 0, len = imgsglobal.length; i <len; i ++) {
str+= '<li> <img src = "wait" resrc = "'+imgsglobal [i]+'" /> </li>'
}
$ ("#showimg"). append (str);
}
$ (documento) .Ready (function () {
addimgele ();
});
(función (win) {
var lazyload = win ['lazyload'] || {};
var camelize = function (s) {
return s.replace (/-(/w)/g, función (strmatch, p1) {
return p1.ToUpperCase ();
});
};
Lazyload = {
init: function (imgClass) {
Var OffsetPage = Window.PageyOffset?
offsetWindow = offsetPage + Number (Windows.innerHeight? Window.innerheight: document.documentelement.clientHeight);
var imgeles = imgClass;
para (var i = 0, len = imgeles.length; i <len; i ++) {
if (imgeles [i] .getAttribute ("resrc") == "show") {
continuar;
}
var o = imgeles [i];
if (o) {
Postpage = o.getBoundingClientRect (). Top + Window.document.documentelement.scrolltop + window.document.body.scrolltop;
postwindow = postpage + number (this.getStyle (o, 'altura'). reemplazar ('px', ''));
if ((postpage> offsetPage && postpage <offsetWindow) || (postwindow> offsetPage && postwindow <offsetWindow)) {
var src = o.getAttribute ("resrc");
O.SetAttribute ("Src", Src);
O.SetAttribute ("Resrc", "Show");
}
}
}
},
getStyle: function (elemento, propiedad) {
if (argumentos.length! = 2) return false;
value var = element.style [Camelize (Propiedad)];
if (! valor) {
if (document.defaultview && document.defaultview.getComputedStyle) {
var css = document.defaultView.getComputedStyle (elemento, nulo);
valor = css?
} else if (element.currentstyle) {
valor = elemento.CurrentStyle [Camelize (propiedad)];
}
}
Valor de retorno == 'Auto'?
}
}
win.lazyload = lazyload;
})(ventana);
$ (documento) .Ready (function () {
lazyload.init ($ ("img.lazyimg"));
window.onscroll = function () {
lazyload.init ($ ("img.lazyimg"));
}
});