JQuery lazy loading doesn't always work

Question

I have the following to lazy-load images:

$(document).ready(function() {
    // lazy load images
    var win = $(window);
    win.on('load resize scroll', function() {
        var viewport = {
            top: win.scrollTop(),
            left: win.scrollLeft()
        };
        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();

        // cycle through all images (within visible content) and update src attributes
        $('img[data-src]').each(function() {
            var bounds = $(this).offset();
            bounds.right = bounds.left + $(this).outerWidth();
            bounds.bottom = bounds.top + $(this).outerHeight();

            // if image is within viewable area, display it
            if (!(viewport.right < bounds.left || viewport.left > bounds.right ||
                  viewport.bottom < bounds.top || viewport.top > bounds.bottom)) {
                var img = $(this).attr('data-src');
                if (img) {
                    $(this).attr('src', img);
                    $(this).removeAttr('data-src');
                }
            }
        });
    });
});

What I've noticed (at least in Chrome), however, is that sometimes the images won't initially load, but show up as soon as I start scrolling. Any idea why or what is wrong?

EDIT: here is a JSFiddle although reproducing the problem seems to be completely sporadic, I don't know what exactly causes it... Hence why I'm here.

When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. See: How to create a Minimal, Complete, and Verifiable example — palaѕн
– palaѕн, Commented Jun 2, 2017 at 17:06
it is the condition, where you compare viewport and bounds - output them to console.log and you will see that only images within the viewport are loaded on load event. Remember that, without src set and the actual picture loaded, the bounded rectangle for img tag is small, browser-specific size. — Igor
– Igor, Commented Jun 2, 2017 at 17:19
Could it be that before any images load, all images are collapsed to 0px height, thus triggering the load for all images immediately? — Joseph Marikle
– Joseph Marikle, Commented Jun 2, 2017 at 17:19

ccprog · Accepted Answer · 2017-06-02 18:35:42Z

1

You are calling $(window).on('load', fn) inside the $(document).ready callback. To quote the jQuery doc:

Note that although the DOM always becomes ready before the page is fully loaded, it is usually not safe to attach a load event listener in code executed during a .ready() handler.

Better execute the loader function once unconditionally:

$(document).ready(function() {
    var win = $(window);
    function lazyload () {
        //...
    }
    win.on('resize scroll', lazyload);
    lazyload();
});

answered Jun 2, 2017 at 18:35

ccprog

22.2k4 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mister martin Over a year ago

Thanks, this appears to be the issue! Although sometimes all images are loaded (not lazy-loaded).

Collectives™ on Stack Overflow

JQuery lazy loading doesn't always work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related