Ide Umum untuk Teknologi Penundaan Gambar
1. Sekarang atur jalur SRC yang sesuai dengan elemen IMG sebagai gambar latar belakang, dan jalur URL yang sesuai dengan IMG disimpan dalam atribut mandiri (untuk penggantian SRC).
2. Dapatkan ketinggian gulungan dan ketinggian jendela
3 Looping membutuhkan pemuatan yang tertunda dari array IMG, dapatkan ketinggian IMG, dan tentukan apakah elemen tersebut ada di jendela visual. Jika elemen berada di jendela yang dapat dilihat, SRC diganti.
Ini kode uji
html
Salinan kode adalah sebagai berikut:
<tyle>
.membungkus {
Margin: 20px Auto;
Lebar: 150px;
}
.wrap div {
Perbatasan: 1px bertitik #E29808;
Tinggi: 30px;
Line-Height: 30px;
Margin: 5px Auto;
Teks-Align: tengah;
Lebar: 150px;
}
.wrap .sortable {
latar belakang-warna: #e6d6ab;
Perbatasan: 1px Solid #E29808;
}
#showimg li {
Lebar: 30%;
margin-kiri: 2%;
margin-top: 15px;
Tinggi: 300px;
float: kiri;
Latar Belakang: #CCC;
}
#showimg li: nth-child (3n) {
margin-kiri: 3%;
}
#showimg li img {
Lebar: 100%;
Max-Height: 100%;
}
</tyle>
</head>
<body>
<Div id = "showimg">
<li> <img src = "http://img4.duuitang.com/uploads/item/201306/08/20130608190125_3kfty.jpeg"/> </li>
<li> <img src = "http://cdn.duuitang.com/uploads/item/201306/07/20130607171626_QKC3T.thumb.600_0.jpeg"/> </li>
<li> <img src = "http://i2.sinimg.cn/gm/2011/0127/u5238p115dt20110127111837.jpg"/> </li>
</div>
</body>
Bagian JS
Salinan kode adalah sebagai berikut:
var imgsglobal = [
"http://cdn.duuitang.com/uploads/item/201306/07/20130607171626_QKC3T.thumb.600_0.jpeg",
"http://img4.duitang.com/uploads/item/201306/07/20130607172438_teijr.jpeg",
"http://cdn.duuitang.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/tuysl3r1exnpbwcwnc50yw9iyw9jzg4uy29tltz2v4dhjhl2k0lzc0mdymdazMi9UMl9hbmvyanrhwfhhhiNnnnPhiMhInnMhiRhHi3MhiMhiMhiNnPhiMhiNnPhiMhiNnPhiMhiNnPhiNnnnnnnnMhoMhHiNnNnNFhInnnnnMy3 ,
"http://www.yishun.net/tuysl3r1exnpbwcwmy50yw9iyw9jzg4Uy29tl2ltz2v4dhjHl2kzlzc0mdy1mdazmi9umkvhbf9yavhjhhiMhHhHHHHHHHHEMI9UMKVHBF9YAVHHJHHHHHHHHEMI2MI2MI9UMKVHBF9YAVHJHJHHHHHHHHEMI2HHHHHBF
"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.sinimg.cn/gm/2011/0127/u5238p115dt2011012711837.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.duuitang.com/uploads/item/201201/25/20120125145922_n4vz8.thumb.600_0.jpg"
];
fungsi addimgele () {
var str = '';
untuk (var i = 0, len = imgsglobal.length; i <len; i ++) {
str+= '<li> <img src = "tunggu" resrc = "'+imgsglobal [i]+'" /> </li>'
}
$ ("#showimg"). append (str);
}
$ (dokumen) .ready (function () {
addimgele ();
});
(function (win) {
var lazyload = win ['malaseload'] || {};
var camelize = function {
return s.replace (/-(/w)/g, function (strmatch, p1) {
return p1.tuppercase ();
});
};
malaseload = {
init: function (imgclass) {
var offsetpage = window.pageyoffset?
OffsetWindow = OffsetPage + Number (window.innerheight? window.innerheight: document.documentelement.clientHeight);
var imgeles = imgclass;
untuk (var i = 0, len = imgeles.length; i <len; i ++) {
if (imgeles [i] .getAttribute ("resrc") == "show") {
melanjutkan;
}
var o = imgeles [i];
if (o) {
postpage = o.getBoundingClientRect (). Top + window.document.documentelement.scrolltop + window.document.body.scrolltop;
postwindow = postpage + angka (this.getstyle (o, 'height'). ganti ('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 (elemen, properti) {
if (arguments.length! = 2) return false;
var value = element.style [Camelize (properti)];
if (! value) {
if (document.defaultview && document.defaultview.getComputedstyle) {
var css = document.defaultview.getComputedstyle (elemen, null);
nilai = CSS?
} else if (element.currentstyle) {
value = element.currentstyle [Camelize (properti)];
}
}
nilai pengembalian == 'otomatis'?
}
}
win.lazyload = malaseload;
})(jendela);
$ (dokumen) .ready (function () {
lazyload.init ($ ("img.lazyimg"));
window.onscroll = function () {
lazyload.init ($ ("img.lazyimg"));
}
});