jQuery: On load event not working consistently

Question

I'm trying to lazy-load images using the following script (lazy-load.js):

function lazyLoadImage(imgContainers) {
    var img = $('<img src="">');
    imgContainers.each(function (i, elm) {
        img.attr('src', $(elm).data("large"));
        img.on('load', function () {
            $(this).addClass('loaded');
        });
        img.addClass('picture');
        $(elm).append(img.clone(true));
    });
}

$(window).on('load',function () {
    var imgContainers = $(document).find(".img-container:not(:has(.loaded))"); // images not loaded yet
    lazyLoadImage(imgContainers);
});

The problem is, everything goes well if I load the script using <script></script> tag but when the script is loaded dynamically using jquery $.getscript() the script is not working consistently (i.e. sometimes the onload event is not triggering). Loading script dynamically:

$.getScript( "path/to/lazy-load.js" )
  .done(function( script, textStatus ) {
    console.log( "script loaded' );
  })
  .fail(function( jqxhr, settings, exception ) {
    console.log( "script not loaded' );
});

So, why the script is not working consistently??

Answer 1

window.load fires when the window finished loading. It doesn't fire a second time when you load more content via ajax because there is no way to tell for the browser when you will be finished loading additional content. So for all stuff you do via ajax you have to execute all functionality again.

In your case I guess you want these things to happen:

   var imgContainers = $(document).find(".img-container:not(:has(.loaded))"); // images not loaded yet
    lazyLoadImage(imgContainers);

So I would say put this in a function and just call it when you finish loading the script:

function lazyloadimages() {
    var imgContainers = $(document).find(".img-container:not(:has(.loaded))"); // images not loaded yet
    lazyLoadImage(imgContainers);
}

$(window).on('load',function () {
    lazyloadimages(); // notice this change, put the stuff in an extra function so you can reuse it! 
});


$.getScript( "path/to/lazy-load.js" )
  .done(function( script, textStatus ) {
    console.log( "script loaded' );
    lazyloadimages();
  })
  .fail(function( jqxhr, settings, exception ) {
    console.log( "script not loaded' );
    // oh no something went wrong, no need to lazyload something here! 
});