Idéias gerais para atraso de imagem Tecnologia
1. Agora defina o caminho SRC correspondente ao elemento IMG como a imagem em segundo plano, e o caminho da URL correspondente ao IMG é armazenado em um atributo auto-eFet (para substituição de SRC).
2. Obtenha a altura do carretel e a altura da janela
3 O looping requer carregamento atrasado da matriz IMG, obtenha a altura do IMG e determine se o elemento está na janela visual. Se o elemento estiver na janela visível, o SRC será substituído.
Aqui está o código de teste
html
A cópia do código é a seguinte:
<estilo>
.enrolar {
margem: 20px automático;
Largura: 150px;
}
.Wrap div {
borda: 1px pontilhado #e29808;
Altura: 30px;
altura de linha: 30px;
margem: 5px automático;
Alinhamento de texto: centro;
Largura: 150px;
}
.Wrap .Sortable {
Background-Color: #e6d6ab;
borda: 1px sólido #e29808;
}
#showimg li {
largura: 30%;
margem-esquerda: 2%;
Margin-top: 15px;
Altura: 300px;
flutuar: esquerda;
Antecedentes: #ccc;
}
#showimg li: nth-filho (3n) {
margem-esquerda: 3%;
}
#showimg li img {
largura: 100%;
MAX-HEUTH: 100%;
}
</style>
</head>
<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>
JS parte
A cópia do código é a seguinte:
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/tuysL3R1eXNpbWcwNC50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2k0Lzc0MDY1MDAzMi9UMl9HbmVYanRhWFhYWFhYWFhfISE3NDA2NT AwMzIuanBn.jpg",
"http://www.yishun.net/tuysL3R1eXNpbWcwMy50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2kzLzc0MDY1MDAzMi9UMkVHbF9YaVhjWFhYWFhfISE3NDA2N TAwMzIuanBn.jpg",
"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.so.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"
];
função addimgele () {
var str = '';
for (var i = 0, len = imgsglobal.length; i <len; i ++) {
str+= '<li> <img src = "wait" resrc = "'+imgsglobal [i]+'" /> </li>'
}
$ ("#showImg"). Appender (STR);
}
$ (document) .ready (function () {
addimgele ();
});
(function (win) {
var lazyload = win ['LAZYLOAD'] || {};
var camelize = função (s) {
Retorne s.Replace (/-(/w)/g, função (strmatch, p1) {
return p1.touppercase ();
});
};
Lazyload = {
init: function (imgclass) {
var offsetpage = window.pageyoffset?
offsetWindow = OffsetPage + Número (Window.innerHeight? Window.innerHeight: document.documentElement.clientHeight);
var imgeles = imgclass;
for (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;
pós -window = postagem + número (this.getStyle (o, 'altura'). substituir ('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, propriedade) {
if (argumentos.length! = 2) retorna false;
var value = element.style [camelize (propriedade)];
if (! value) {
if (document.defaultView && document.defaultView.getComputedStyle) {
var css = document.defaultView.getComputedStyle (elemento, nulo);
Valor = CSS?
} else if (element.currentStyle) {
value = element.currentStyle [camelize (propriedade)];
}
}
Valor de retorno == 'Auto'? '': Valor;
}
}
win.LazyLoad = LazyLoad;
})(janela);
$ (document) .ready (function () {
lazyload.init ($ ("img.lazyImg"));
window.onscroll = function () {
lazyload.init ($ ("img.lazyImg"));
}
});