JQuery LazyLoad Alternative (minus scrollbar code)

Hey, I would like to use the jQuery plugin: LazyLoad

But instead of triggering an event in the scroll window - I would like to trigger it when the elements are visible.

(I don't have scrollbars on my site, so no scrollbars).

Help me before I have any hair left.

EDIT: Okay, so I got it to work - SORT OF - it only works vertically and ONLY WITH BUT! *

+4
source share
1 answer

It is best to set a timer and repeatedly check the visibility of the image. Or you can make a public method of the tracker function, and then call it from the outside if something changes.

Change LazyLoad to something like this:

 // ... var elements = this; if ("scroll" == settings.event) { // <-- you may want to remove conditional block var tracker = function(event) { // <-- give it a name var counter = 0; elements.each(function() { if ($.abovethetop(this, settings) || $.leftofbegin(this, settings)) { /* Nothing. */ } else if (!$.belowthefold(this, settings) && !$.rightoffold(this, settings)) { $(this).trigger("appear"); } else { if (counter++ > settings.failurelimit) { return false; } } }); /* Remove image from array so it is not looped next time. */ var temp = $.grep(elements, function(element) { return !element.loaded; }); elements = $(temp); }; (function repeat(){ tracker(); // <-- so you can use it here if (elements.length) setTimeout(repeat, 100); // <-- check every 100ms })(); } // ... 
+2
source

Source: https://habr.com/ru/post/1315634/


All Articles