时间戳

首页 > 解决方案 > jQuery：加载事件无法始终如一地工作

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

问题描述

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

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

标签： javascriptjqueryprogressive-download

解决方案

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

推荐阅读