Efeito de implementação: Quando a barra de rolagem é puxada para baixo, a imagem aparece na área visível e começa a carregar
Ideias:
(1) TAG IMG, coloque o endereço de imagem real nas propriedades que você definir, como Lazy-SRC
(2) Obtenha a altura do IMG da página (em JQ, Offset (). Top), nativamente:
img.getBoundingClientRect (). top + document.body.scrolltop || document.documentElement.scrolltop
(3) Determine se o local onde o IMG aparece está na área visível:
. Na área visível do navegador, JustTop> scrolltop && OffsetTop <(scrolltop+windowHeight), aqui o JustTop é o OffsetTop+Altura da imagem da imagem
A cópia do código é a seguinte:
// Salvar o documento em variáveis para reduzir a consulta para documentar
var doc = document;
for (var n = 0, i = this.oimg.length; n <i; n ++) {
// Obtenha o endereço da imagem da imagem da imagem
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 + IMGHOUST;
// determinar se a imagem está na área visível
if (justtop> scrolltop && offsetTop <(scrolltop+windowHeight)) {
this.isload (hsrc, n);
}
}
}
A seguir, o código detalhado:
A cópia do código é a seguinte:
função lgy_imgscrollload (opção) {
this.oimg = document.getElementById (option.wrapid) .getElementsByTagName ('img');
this.sholder_src = option.holder_src;
this.int ();
}
Lgy_imgscrollload.prototype = {
LoadImg: function () {
// Salvar o documento em variáveis para reduzir a consulta para documentar
var doc = document;
for (var n = 0, i = this.oimg.length; n <i; n ++) {
// Obtenha o endereço da imagem da imagem da imagem
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 + IMGHOUST;
// determinar se a imagem está na área visível
if (justtop> scrolltop && offsetTop <(scrolltop+windowHeight)) {
// alert (offsetTop);
this.isload (hsrc, n);
}
}
}
},
Isload: function (src, n) {
var src = src,
n = n,
O_IMG = new Image (),
_ que = this;
O_IMG.ONLLOAD = (function (n) {
_athat.oimg [n] .SetAttribute ('src', src);
_athat.oimg [n] .removeattribute (_athat.sholder_src);
}) (n);
O_IMG.SRC = SRC;
},
int: function () {
this.loadImg ();
var _ que this, este,
Timer = nulo;
// rolagem: adicione um cronômetro para evitar chamadas frequentes para a função LoadImg
window.onscroll = function () {
ClearTimeout (timer);
Timer = setTimeout (function () {
_that.loadimg ();
}, 100);
}
}
}
Imagem de reprodução:
O acima é tudo sobre este artigo. O efeito de implementação não é pior que o do plug-in jQuery. O código é mais simples. Por favor, consulte isso.