jQuery：加载事件不一致

Question

我正在尝试使用以下脚本 (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);
});

问题是，如果我使用<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' );
});

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

Answer 1

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

在你的情况下，我猜你希望这些事情发生：

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

所以我会说把它放在 function 中，当你完成加载脚本时调用它：

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