Efek Implementasi: Saat scrollbar ditarik ke bawah, gambar muncul di area yang terlihat dan mulai memuat
Ide:
(1) Tag IMG, letakkan alamat gambar asli di properti yang Anda atur, seperti malas-src
(2) Dapatkan ketinggian IMG dari halaman (di jq, offset (). Top), secara asli:
img.getBoundingClientRect (). Top + document.body.scrolltop || document.documentelement.scrolltop
(3) Tentukan apakah lokasi di mana IMG muncul di area yang terlihat:
.Di area yang terlihat dari browser, justtop> scrolltop && offsettop <(scrolltop+windowheight), di sini justtop adalah ketinggian gambar+gambar gambar dari gambar
Salinan kode adalah sebagai berikut:
// Simpan dokumen dalam variabel untuk mengurangi kueri untuk didokumentasikan
var doc = dokumen;
untuk (var n = 0, i = this.oimg.length; n <i; n ++) {
// Dapatkan alamat gambar placeholder gambar
var hsrc = this.oimg [n] .getAttribute (this.sholder_src);
if (hsrc) {
var scrolltop = doc.body.scrolltop || doc.documentelement.scrolltop,
windowheight = doc.documentelement.clientHeight,
offsettop = this.oimg [n] .getBoundingClientRect (). Top + Scrolltop,
imgheight = this.oimg [n] .clientHeight,
justtop = offsettop + imgheight;
// Tentukan apakah gambar berada di area yang terlihat
if (justtop> scrolltop && offsettop <(scrolltop+windowheight)) {
this.isload (hsrc, n);
}
}
}
Berikut ini adalah kode terperinci:
Salinan kode adalah sebagai berikut:
fungsi lgy_imgscrollload (opsi) {
this.oimg = document.getElementById (option.wrapid) .geteLementsbyTagname ('img');
this.sholder_src = option.holder_src;
this.int ();
}
Lgy_imgscrollload.prototype = {
LoadImg: function () {
// Simpan dokumen dalam variabel untuk mengurangi kueri untuk didokumentasikan
var doc = dokumen;
untuk (var n = 0, i = this.oimg.length; n <i; n ++) {
// Dapatkan alamat gambar placeholder gambar
var hsrc = this.oimg [n] .getAttribute (this.sholder_src);
if (hsrc) {
var scrolltop = doc.body.scrolltop || doc.documentelement.scrolltop,
windowheight = doc.documentelement.clientHeight,
offsettop = this.oimg [n] .getBoundingClientRect (). Top + Scrolltop,
imgheight = this.oimg [n] .clientHeight,
justtop = offsettop + imgheight;
// Tentukan apakah gambar berada di area yang terlihat
if (justtop> scrolltop && offsettop <(scrolltop+windowheight)) {
// peringatan (offsettop);
this.isload (hsrc, n);
}
}
}
},
isload: function (src, n) {
var src = src,
n = n,
o_img = gambar baru (),
_That = ini;
o_img.onload = (function (n) {
_that.oimg [n] .setAttribute ('src', src);
_that.oimg [n] .removeattribute (_that.sholder_src);
})(N);
o_img.src = src;
},
int: function () {
this.loadImg ();
var _that = ini,
timer = null;
// Gulir: Tambahkan timer untuk mencegah panggilan sering ke fungsi memuat
window.onscroll = function () {
ClearTimeout (timer);
timer = setTimeout (function () {
_that.LoadImg ();
}, 100);
}
}
}
Gambar reproduksi:
Di atas adalah semua tentang artikel ini. Efek implementasi tidak lebih buruk dari plug-in jQuery. Kode lebih sederhana. Silakan merujuknya.