How to set up lazyLoad Jquery to load the moment it appears on the screen?

Question

JavaScript

Good afternoon.
There are many pictures in divs loaded by LazyLoad.
Added "live" filtering through jQuery filter.
When filtering, scrolling does not occur, and images are not loaded.
How to support both scroll and filter events.

Answer 1

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

This will enable image preloading within a 200px radius from the edge of the screen.
But if, for example, you have tabs on the site, then images in tabs that are not active will not be loaded until you start turning the mouse wheel, for this you need to add a lazyload to switch tabs:

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

Accordingly, you need to call lazyload on the "onFiltered" type event for that part of the page where the images should be loaded.

Answer 2

Most filtering plugins fire some sort of event when the content changes (like layout.shuffle in shuffle.js, etc.) that you can subscribe to and call $(window).trigger('scroll') to fire a LazyLoad ( or in the case of the LazyLoadXT plugin, simply add this event to the list of events to which it should respond).