Как настроить lazyLoad Jquery для загрузки в момент появления на экране?

Question

[Alex]

Добрый день.
Есть много картинок в дивах, загружаемые по LazyLoad.
Добавилась "живая" фильтрация через JQuery filter.
При фильтрации скрол не происходит, и картинки не грузятся.
Как сделать поддержку и скрола, и события фильтра.

Answer 1

[Алексей Соломаха]

$("img.lazy").lazyload({
    threshold : 200
});

Это включит предзагрузку картинок в радиусе 200 пикселей от края экрана.
Но если у вас например табы на сайте, то картинки в табах которые не активны не загрузятся, пока вы не начнете крутить колёсико мышки, для этого вам необходимо добавить lazyload для переключения табов:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
   $('#' + $(e.target).attr('href').substr(1) + ' img.lazy').lazyload({threshold: 200});
})

Соответственно вам нужно по событию типа "onFiltered" вызвать lazyload для той части страницы куда картинки должны загрузится.

Comments

[Alex]

Уже нашел решение которое позволяет выполнять перерисовку по требованию

jQuery(document).ready(function($) {
var $win = $(window),
$imgs = $("img"),
$con = $('#container').isotope();

function loadVisible($els, trigger) {
$els.filter(function() {
var rect = this.getBoundingClientRect();
return rect.top >= 0 && rect.top <= window.innerHeight;
}).trigger(trigger);
}
$con.isotope('on', 'layoutComplete', function() {
loadVisible($imgs, 'lazylazy');
});
$win.on('scroll', function() {
loadVisible($imgs, 'lazylazy');
});
$imgs.lazyload({
effect: "fadeIn",
failure_limit: Math.max($imgs.length - 1, 0),
event: 'lazylazy'
});

Answer 2

[mobi]

Большинство плагинов фильтрации генерируют какое-нибудь событие при изменении содержимого (например, layout.shuffle в shuffle.js, и т.д.), на которое можно подписаться и вызывать $(window).trigger('scroll') для запуска LazyLoad (или в случае плагина LazyLoadXT просто дописать это событие в список событий, на которые он должен реагировать).

Comments

[Alex]

Уже откоментил выше. Примерно так и решилось