jQuery：加载事件无法始终如一地工作

如何解决jQuery：加载事件无法始终如一地工作

我正在尝试使用以下脚本（lazy-load.js）来lazy-load个图像：

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);
});

问题是，如果我使用<script></script>标签加载脚本，一切都会顺利进行，但是当使用jquery $.getscript()动态加载脚本时，脚本无法始终如一地工作（即，有时onload事件不会触发）。 动态加载脚本：

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

那么，为什么脚本不能始终如一地工作？

解决方法

window.load在窗口加载完成时触发。通过ajax加载更多内容时，不会再次触发，因为无法告知浏览器何时完成其他内容的加载。因此，对于通过ajax执行的所有操作，您必须再次执行所有功能。

就您而言，我想您希望这些事情发生：

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

因此，我想说的是将其放入函数中，并在完成脚本加载后调用它：

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! 
});