Question

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

But, rather than trigger the event on Window Scroll – I would like to trigger it when the
elements come into view.

(I have no scroll bars on my site, so scroll bars are not an option).

Help me before I have no hair left.

EDIT: Ok, so I got it to work – SORT OF – it only seems to work vertically and ONLY WITH THE OVERFLOW SHOWING! *

Answer 1

Your best bet is to set a timer and repeatedly check for image visibility. Or you can make the tracker function public method and then call it from the outside if something alters.

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
    })();
}
// ...