Efecto de implementación: cuando se tira la barra de desplazamiento hacia abajo, la imagen aparece en el área visible y comienza a cargarse
Ideas:
(1) Etiqueta IMG, coloque la dirección de imagen real en las propiedades que establece, como Lazy-Src
(2) Obtenga la altura de IMG de la página (en JQ, offset (). Arriba), nativamente:
img.getBoundingClientRect (). Top + document.body.scrolltop || document.documentelement.scrolltop
(3) Determine si la ubicación donde aparece el IMG está en el área visible:
. En el área visible del navegador, justtop> scrolltop && offsettop <(scrolltop+windowHeight), aquí justtop está la altura de la imagen offsettop+de la imagen
La copia del código es la siguiente:
// Guardar documento en variables para reducir la consulta para documentar
var doc = documento;
para (var n = 0, i = this.oimg.length; n <i; n ++) {
// Obtenga la dirección de imagen del marcador de posición de la imagen
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;
// Determinar si la imagen está en el área visible
if (justtop> scrolltop && offsettop <(scrolltop+windowHeight)) {
this.isload (hsrc, n);
}
}
}
El siguiente es el código detallado:
La copia del código es la siguiente:
función lgy_imgscrollload (opción) {
this.oimg = document.getElementById (opcion.wrapid) .getElementsBytagName ('img');
this.sholder_src = option.holder_src;
this.int ();
}
Lgy_imgscrollload.prototype = {
loadimg: function () {
// Guardar documento en variables para reducir la consulta para documentar
var doc = documento;
para (var n = 0, i = this.oimg.length; n <i; n ++) {
// Obtenga la dirección de imagen del marcador de posición de la imagen
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;
// Determinar si la imagen está en el área visible
if (justtop> scrolltop && offsettop <(scrolltop+windowHeight)) {
// alerta (offsettop);
this.isload (hsrc, n);
}
}
}
},
isload: function (src, n) {
var src = src,
n = n,
o_img = nueva imagen (),
_That = this;
o_img.onload = (function (n) {
_that.oimg [n] .SetAttribute ('src', src);
_that.oimg [n] .removeattribute (_that.sholder_src);
})(norte);
o_img.src = src;
},
int: functer () {
this.loadImg ();
var _THAT = esto,
temporizador = nulo;
// desplazarse: agregue un temporizador para evitar llamadas frecuentes a la función Loadimg
window.onscroll = function () {
ClearTimeOut (temporizador);
timer = setTimeOut (function () {
_That.LoadImg ();
}, 100);
}
}
}
Imagen de reproducción:
Lo anterior se trata de este artículo. El efecto de implementación no es peor que el del complemento jQuery. El código es más simple. Consulte ello.