Effet de mise en œuvre: lorsque la barre de défilement est abaissée, l'image apparaît dans la zone visible et commence à se charger
Idées:
(1) TAG IMG, mettez la véritable adresse d'image dans les propriétés que vous définissez, comme Lazy-SRC
(2) Obtenez la hauteur de l'IMG de la page (en jq, offset (). En haut), nativement:
img.getBoundingClientRect (). top + document.body.scrolltop || document.DocumentElement.ScrollTop
(3) Déterminer si l'emplacement où l'IMG apparaît est dans la zone visible:
.Dans la zone visible du navigateur, JustTop> ScrollTop && offsetOp <(ScrollTop + Windowheight), Ici JustTop est la hauteur de décalage + de l'image de l'image de l'image
La copie de code est la suivante:
// Enregistrer le document en variables pour réduire la requête en document
var doc = document;
pour (var n = 0, i = this.oimg.length; n <i; n ++) {
// Obtenez l'adresse d'image de l'image de l'image
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;
// déterminer si l'image est dans la zone visible
if (JustTop> ScrollTop && offSetTop <(scrolltop + windowheight)) {
this.isload (hsrc, n);
}
}
}
Ce qui suit est le code détaillé:
La copie de code est la suivante:
fonction lgy_imgscrollload (option) {
this.oimg = document.getElementById (option.wrapid) .getElementsByTagName ('img');
this.sholder_src = option.holder_src;
this.int ();
}
Lgy_imgscrollload.prototype = {
loveMg: function () {
// Enregistrer le document en variables pour réduire la requête en document
var doc = document;
pour (var n = 0, i = this.oimg.length; n <i; n ++) {
// Obtenez l'adresse d'image de l'image de l'image
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;
// déterminer si l'image est dans la zone visible
if (JustTop> ScrollTop && offSetTop <(scrolltop + windowheight)) {
// alerte (OffsetTop);
this.isload (hsrc, n);
}
}
}
},
Isload: fonction (src, n) {
var src = src,
n = n,
o_img = new image (),
_That = this;
o_img.onload = (fonction (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 = ceci,
minuterie = null;
// défile: ajoutez une minuterie pour éviter les appels fréquents vers la fonction LoadImg
window.onscroll = function () {
ClearTimeout (temporisateur);
timer = setTimeout (function () {
_That.LoadImg ();
}, 100);
}
}
}
Image de reproduction:
Ce qui précède concerne cet article. L'effet de mise en œuvre n'est pas pire que celui du plug-in jQuery. Le code est plus simple. Veuillez vous y référer.