Lazyload on click not respected when image inside viewport on load or window resize

This may be a question, rather than an issue.

I have set the click event as a trigger for the lazyload,

$('#' + elemId).lazyload({event: 'click'});

but that only works when the image is “bellow the fold” on page load, if the image is in the viewport when the page is loaded, lazyload is triggered and the images are loaded without click event.

I understand that the code bellow is responsible for this behavior, it checks if the image is inside the viewport on document ready. I was wandering if there should be a check if the event is different than scroll so not to trigger this behavior. This also happens on window resize.

/* Force initial check if images should appear. */
$(document).ready(function() {
    update();
});

function update() {
    var counter = 0;

    elements.each(function() {
        var $this = $(this);
        if (settings.skip_invisible && !$this.is(":visible")) {
            return;
        }
        if ($.abovethetop(this, settings) ||
            $.leftofbegin(this, settings)) {
                /* Nothing. */
        } else if (!$.belowthefold(this, settings) &&     <------- Right here
            !$.rightoffold(this, settings)) {
                $this.trigger("appear");
                /* if we found an image we'll load, reset the counter */
                counter = 0;
        } else {
            if (++counter > settings.failure_limit) {
                return false;
            }
        }
    });
}

[lucas-barros]

I modified the update function, like bellow:

function update() {
    var counter = 0;

    elements.each(function() {
        var $this = $(this);
        if (settings.skip_invisible && !$this.is(":visible")) {
            return;
        }
        if (settings.event != "scroll") {  /// Stop lazyloading when above the fold for events different then scroll
            return;
        }
        if ($.abovethetop(this, settings) ||
            $.leftofbegin(this, settings)) {
                /* Nothing. */
        } else if (!$.belowthefold(this, settings) &&    
            !$.rightoffold(this, settings)) {
                $this.trigger("appear");
                /* if we found an image we'll load, reset the counter */
                counter = 0;
        } else {
            if (++counter > settings.failure_limit) {
                return false;
            }
        }
    });
}

[tuupola]

This is by design. If you only need to load images on click this plugin is quite moot. You could achieve load by click with something like:

$("img.lazy").one("click", function(event) { 
    $(this).attr("src", $(this).attr("data-original"));
});