Эффект реализации: когда прокрутка стянута, изображение появляется в видимой области и начинает загрузку
Идеи:
(1) IMG TAG, поместите реальный адрес изображения в установленные вами свойства, такие как Lazy-SRC
(2) Получить высоту IMG со страницы (в jq, offset (). Top), изначально:
img.getBoundingClientRect (). Top + document.body.scrolltop || document.documentelement.scrolltop
(3) Определите, находится ли место, где появляется IMG в видимой области:
. В видимой области браузера, JustTop> Scrolltop && offsetTop <(Scrolltop+WindowHeight), здесь JustTop - это высота изображения FOFFSETTOP+изображения
Кода -копия выглядит следующим образом:
// Сохранить документ в переменных, чтобы уменьшить запрос на документ
var doc = документ;
for (var n = 0, i = this.oimg.length; n <i; n ++) {
// Получите адрес изображения изображения изображения.
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;
// определить, находится ли изображение в видимой области
if (usttop> scrolltop && offsettop <(scrolltop+windowheight)) {
this.isload (hsrc, n);
}
}
}
Ниже приведен подробный код:
Кода -копия выглядит следующим образом:
function lgy_imgscrollload (option) {
this.oimg = document.getElementbyId (option.wrapid) .getElementsBytagName ('img');
this.sholder_src = option.holder_src;
this.int ();
}
Lgy_imgscrollload.prototype = {
LoadImg: function () {
// Сохранить документ в переменных, чтобы уменьшить запрос на документ
var doc = документ;
for (var n = 0, i = this.oimg.length; n <i; n ++) {
// Получите адрес изображения изображения изображения.
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;
// определить, находится ли изображение в видимой области
if (usttop> scrolltop && offsettop <(scrolltop+windowheight)) {
// предупреждение (OffSetTop);
this.isload (hsrc, n);
}
}
}
},
isload: function (src, n) {
var src = src,
n = n,
O_IMG = New Image (),
_That = это;
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 = это,
timer = null;
// Прокрутка: добавьте таймер, чтобы предотвратить частые вызовы для загрузки функции
window.onscroll = function () {
ClearTimeout (таймер);
timer = settimeout (function () {
_That.LoadImg ();
}, 100);
}
}
}
Изображение воспроизведения:
Выше всего об этой статье. Эффект реализации не хуже, чем эффект плагина jQuery. Код проще. Пожалуйста, обратитесь к этому.