Общие идеи для технологии задержки с картинками
1. Теперь установите путь SRC, соответствующий элементу IMG в качестве фонового изображения, и путь URL, соответствующий IMG, хранится в атрибуте самостоятельного установки (для замены SRC).
2. Получите высоту катушки и высоту окна
3 Цикл требует отсроченной загрузки массива IMG, получения высоты IMG и определения, находится ли элемент в визуальном окне. Если элемент находится в окне для просмотра, SRC заменяется.
Вот тестовый код
HTML
Кода -копия выглядит следующим образом:
<style>
.сворачивать {
Маржа: 20px Auto;
Ширина: 150px;
}
.wrap div {
Граница: 1px пунктир #e29808;
Высота: 30px;
высота линии: 30px;
Маржа: 5px Auto;
Текст-альбом: Центр;
Ширина: 150px;
}
.wrap. Соответствующий {
фоновый цвет: #e6d6ab;
Граница: 1PX SOLID #E29808;
}
#showimg li {
Ширина: 30%;
Мяботая маржа: 2%;
маржинальная версия: 15px;
Высота: 300px;
Плавание: осталось;
Фон: #CCC;
}
#showimg li: nth-child (3n) {
Мяботая маржа: 3%;
}
#showimg li img {
Ширина: 100%;
Макс-высот: 100%;
}
</style>
</head>
<тело>
<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 Part
Кода -копия выглядит следующим образом:
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/lioxiaojun/b003u5taty_01_amzn.jpg",
"http://www.yishun.net/tuysl3r1exnpbwcwnc50yw9iyw9jzg4uy29tl2ltz2v4dhjhl2k0lzc0mdy1mdazmi9uml9hbmvyanrhwfhywfhywfhfise3 -hbmwanrhwfhywfhywfhfise3 -hbmvyanrhwfhywfhlish -hbmwanrhwfhywfhfish -whbmvanrhwfhywfh -wmda -hvmvhynbsj
"http://www.yishun.net/tuysl3r1exnpbwcwmy50yw9iyw9jzg4uy29tl2ltz2v4dhjhl2kzlzc0mdy1mdazmi9umkvhbf9yavhjwfhywfhfishfise3nda2nbmznbmznbmznbmznbmrhnbmrhnbmrh -hu -hu
"http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kfty.jpeg",
"http://img4.duitang.com/uploads/item/201304/29/20130429142901_sqjv.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"
];
функция addImgele () {
var str = '';
for (var i = 0, len = imgsglobal.length; i <len; i ++) {
str+= '<li> <img src = "ждать" resrc = "'+imgsglobal [i]+'" /> < /li>'
}
$ ("#showimg"). Append (str);
}
$ (document) .ready (function () {
addimgele ();
});
(function (win) {
var lazyload = win ['Lazyload'] || {};
var camelize = function (s) {
return s.replace (/-(/w)/g, function (strmatch, p1) {
return p1.touppercase ();
});
};
Lazyload = {
init: function (imgclass) {
var offsetpage = window.pageyoffset?
offsetWindow = offsetPage + номер (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") {
продолжать;
}
var o = imgeles [i];
if (o) {
PostPage = O.GetBoundingClientRect (). Top + window.document.documentelement.scrolltop + window.document.body.scrolltop;
postwindow = postpage + number (this.getStyle (o, 'height'). reply ('px', ''));
if ((postpage> offsetPage && postpage <fftsetWindow) || (postwindow> offsetPage && postwindow <fftsetWindow)) {
var src = o.getAttribute ("resrc");
o.setattribute ("src", src);
o.setattribute ("resrc", "show");
}
}
}
},
getStyle: function (element, property) {
if (arguments.length! = 2) вернуть false;
var value = element.style [Camelize (свойство)];
if (! value) {
if (document.defaultview && document.defaultview.getComputeDStyle) {
var css = document.defaultview.getComputedStyle (element, null);
value = css?
} else if (element.currentStyle) {
value = element.currentStyle [Camelize (свойство)];
}
}
return value == 'Auto'?
}
}
win.lazyload = lazyload;
})(окно);
$ (document) .ready (function () {
lazyload.init ($ ("img.lazyimg"));
window.onscroll = function () {
lazyload.init ($ ("img.lazyimg"));
}
});