Implementierungseffekt: Wenn die Bildlaufleiste heruntergezogen wird, erscheint das Bild im sichtbaren Bereich und beginnt das Laden
Ideen:
(1) IMG-Tag, geben Sie die reale Bildadresse in die von Ihnen festgelegten Eigenschaften wie Lazy-Src ein
(2) Holen Sie sich die Höhe von IMG von der Seite (in JQ, Offset (). Top), nativ:
img.getBoundingClientRect (). Top + document.body.Scrolltop || document.documentElement.scrolltop
(3) Bestimmen Sie, ob sich der Ort, an dem sich der IMG erscheint, im sichtbaren Bereich befindet:
.In den sichtbaren Bereich des Browsers, JustTop> Scrolltop && offsettop <(scrolltop+windowheight), hier ist JustTop die Offsettop+Bildhöhe des Bildes
Die Codekopie lautet wie folgt:
// Dokument in Variablen speichern, um die Abfrage zum Dokument zu reduzieren
var doc = document;
für (var n = 0, i = this.oimg.length; n <i; n ++) {
// Holen Sie sich die Image -Platzhalter -Bildadresse
var hsrc = this.oimg [n] .GetAttribute (this.holder_src);
if (hsrc) {
var scrolltop = doc.body.scrolltop || doc.documentElement.scrolltop,
windowHeight = doc.documentElement.clientHeight,
offsettop = this.oimg [n] .GetboundingClientRect (). Top + Scrolltop,
imgheeight = this.oimg [n] .clientHeight,
JustTop = Offsettop + Imgheeight;
// Bestimmen Sie, ob sich das Bild im sichtbaren Bereich befindet
if (JustTop> scrolltop && offsettop <(scrolltop+windowheight)) {
Diese.
}
}
}
Das Folgende ist der detaillierte Code:
Die Codekopie lautet wie folgt:
Funktion lgy_imgScrollload (Option) {
this.oimg = document.getElementById (option.WrapID) .GetElementsByTagName ('img');
this.ssolder_src = option.holder_src;
this.int ();
}
Lgy_imgScrollload.Prototype = {
loadImg: function () {
// Dokument in Variablen speichern, um die Abfrage zum Dokument zu reduzieren
var doc = document;
für (var n = 0, i = this.oimg.length; n <i; n ++) {
// Holen Sie sich die Image -Platzhalter -Bildadresse
var hsrc = this.oimg [n] .GetAttribute (this.holder_src);
if (hsrc) {
var scrolltop = doc.body.scrolltop || doc.documentElement.scrolltop,
windowHeight = doc.documentElement.clientHeight,
offsettop = this.oimg [n] .GetboundingClientRect (). Top + Scrolltop,
imgheeight = this.oimg [n] .clientHeight,
JustTop = Offsettop + Imgheeight;
// Bestimmen Sie, ob sich das Bild im sichtbaren Bereich befindet
if (JustTop> scrolltop && offsettop <(scrolltop+windowheight)) {
// alarm (offsettop);
Diese.
}
}
}
},
ISLOAD: Funktion (src, n) {
var src = src,
n = n,
o_img = new Image (),
_that = this;
o_img.onload = (Funktion (n) {
_that.oimg [n] .SetAttribute ('src', src);
_that.oimg [n] .removeAttribute (_that.shoDer_Src);
})(N);
o_img.src = src;
},
int: function () {
this.loadimg ();
var _that = this,,
Timer = null;
// Scrollen: Fügen Sie einen Timer hinzu, um häufige Aufrufe zur LoadImg -Funktion zu verhindern
window.onscroll = function () {
Clearimeout (Timer);
timer = setTimeout (function () {
_that.loadimg ();
}, 100);
}
}
}
Reproduktionsbild:
Das obige dreht sich alles um diesen Artikel. Der Implementierungseffekt ist nicht schlechter als der des Jquery-Plug-Ins. Der Code ist einfacher. Bitte beachten Sie es.