lazyload - предварительная загрузка соседних изображений
В настоящее время я настраиваю купленную мной тему WordPess, которая использует функцию lazyload в своих галереях изображений.
Как и сейчас, функция lazyload загружает только видимое изображение (которое затем кэшируется). Смежные изображения скрыты снизу и будут загружены только после того, как станут видимыми, щелкнув СЛЕДУЮЩАЯ / ПРЕДЫДУЩАЯ в галерее.
Это приводит к тому, что между изображениями на секунду пропадает изображение, что кажется довольно неудобным. Как только изображения кэшируются, весь СЛЕДУЮЩИЙ / ПРЕДЫДУЩИЙ процесс кажется намного более плавным.
Кто-нибудь знает, есть ли способ настроить следующий код lazyload таким образом, чтобы он заранее загружал не только текущее, но также следующее и предыдущее изображение? Возможно ли это даже в этой части кода?
Я некоторое время пытался найти дорогу сам, но не смог ее решить...
Прошу прощения за ужасное форматирование, именно так и поступил файл с темой. РЕДАКТИРОВАТЬ: переформатировать код для лучшей читаемости.
/*
* Lazy Load - jQuery plugin for lazy loading images
*
* Copyright (c) 2007-2012 Mika Tuupola
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Project home:
* http://www.appelsiini.net/projects/lazyload
*
* Version: 1.8.0
*
*/
(function(a, b) {
var c = a(b);
a.fn.lazyload = function(d) {
function h() {
var b = 0;
e.each(function() {
var c = a(this);
if (g.skip_invisible && !c.is(":visible")) return;
if (!a.abovethetop(this, g) && !a.leftofbegin(this, g))
if (!a.belowthefold(this, g) && !a.rightoffold(this, g)) c.trigger("appear");
else if (++b > g.failure_limit) return !1
})
}
var e = this,
f, g = {
threshold: 0,
failure_limit: 0,
event: "scroll",
effect: "show",
container: b,
data_attribute: "original",
skip_invisible: !0,
appear: null,
load: null
};
return d && (undefined !== d.failurelimit && (d.failure_limit = d.failurelimit, delete d.failurelimit), undefined !== d.effectspeed && (d.effect_speed = d.effectspeed, delete d.effectspeed), a.extend(g, d)), f = g.container === undefined || g.container === b ? c : a(g.container), 0 === g.event.indexOf("scroll") && f.bind(g.event, function(a) {
return h()
}), this.each(function() {
var b = this,
c = a(b);
b.loaded = !1, c.one("appear", function() {
if (!this.loaded) {
if (g.appear) {
var d = e.length;
g.appear.call(b, d, g)
}
a("<img />").bind("load", function() {
c.hide().attr("src", c.data(g.data_attribute))[g.effect](g.effect_speed), b.loaded = !0;
var d = a.grep(e, function(a) {
return !a.loaded
});
e = a(d);
if (g.load) {
var f = e.length;
g.load.call(b, f, g)
}
}).attr("src", c.data(g.data_attribute))
}
}), 0 !== g.event.indexOf("scroll") && c.bind(g.event, function(a) {
b.loaded || c.trigger("appear")
})
}), c.bind("resize", function(a) {
h()
}), h(), this
}, a.belowthefold = function(d, e) {
var f;
return e.container === undefined || e.container === b ? f = c.height() + c.scrollTop() : f = a(e.container).offset().top + a(e.container).height(), f <= a(d).offset().top - e.threshold
}, a.rightoffold = function(d, e) {
var f;
return e.container === undefined || e.container === b ? f = c.width() + c.scrollLeft() : f = a(e.container).offset().left + a(e.container).width(), f <= a(d).offset().left - e.threshold
}, a.abovethetop = function(d, e) {
var f;
return e.container === undefined || e.container === b ? f = c.scrollTop() : f = a(e.container).offset().top, f >= a(d).offset().top + e.threshold + a(d).height()
}, a.leftofbegin = function(d, e) {
var f;
return e.container === undefined || e.container === b ? f = c.scrollLeft() : f = a(e.container).offset().left, f >= a(d).offset().left + e.threshold + a(d).width()
}, a.inviewport = function(b, c) {
return !a.rightofscreen(b, c) && !a.leftofscreen(b, c) && !a.belowthefold(b, c) && !a.abovethetop(b, c)
}, a.extend(a.expr[":"], {
"below-the-fold": function(b) {
return a.belowthefold(b, {
threshold: 0
})
},
"above-the-top": function(b) {
return !a.belowthefold(b, {
threshold: 0
})
},
"right-of-screen": function(b) {
return a.rightoffold(b, {
threshold: 0
})
},
"left-of-screen": function(b) {
return !a.rightoffold(b, {
threshold: 0
})
},
"in-viewport": function(b) {
return !a.inviewport(b, {
threshold: 0
})
},
"above-the-fold": function(b) {
return !a.belowthefold(b, {
threshold: 0
})
},
"right-of-fold": function(b) {
return a.rightoffold(b, {
threshold: 0
})
},
"left-of-fold": function(b) {
return !a.rightoffold(b, {
threshold: 0
})
}
})
})(jQuery, window)
2 ответа
Если вы используете Intersection Observer API (или плагин, который использует этот API), вы можете воспользоваться настройкой "rootMargin". Например, установив его на "800px", оно будет лениво загружать изображение 800px, прежде чем оно войдет в область просмотра.
Не модифицируйте библиотек. Вместо этого вызвать событие lazyload
Загрузка события от события Вы можете использовать событие jQuery, например: click или же mouseover, Вы также можете использовать пользовательские события, такие как sporty или же foobar, По умолчанию стоит подождать, пока пользователь не прокрутит вниз и изображение не появится в окне просмотра.
Чтобы загружать изображения только тогда, когда пользователь нажимает на них, вы можете сделать:
$("img.lazy").lazyload({
event : "customloadimage"
});
А потом в вашем JQuery использовать $image.trigger('customloadimage');(при условии, $image такое jQuery Object)
Рекомендации: