javascript - 检查 .ajax 请求后加载的所有图像？

Question

我需要知道何时从附加的 html 源加载所有图像以执行另一个功能。我该如何检查？

$(document).ready(function () {
  $('a.load-more').click(function (e) {
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: $(this).attr('href'),
        data: {
            page: last_id
        },
        dataType: "script",

        success: function () {
            $('.load-more').show();
        }
    });
  });
});

我像这样附加 html 源代码:

$('.container').append('<%= escape_javascript(render(:partial => @items)) %>');

它成功提供了 html 源代码，但我无法确定何时加载了来自该源的所有图像

.container 在每次点击链接时更新 <a href="/items" class="load-more">Load more</a>

.container 源看起来像这样:

<ul class="container">
  <%= render @items %>
</ul>

Answer 1

在所有支持事件捕获阶段的浏览器上，您可以为所有新添加的图像捕获 onload 事件:

document.addEventListener(
    'load',
    function(event){
        var elm = event.target;
        if( elm.nodeName.toLowerCase() === 'img' && $(elm).closest('.container').length && !$(elm).hasClass('loaded')){ // or any other filtering condition
            console.log('image loaded');
            $(elm).addClass('loaded');
            if($('.container img.loaded').length === $('.container img').length) {          
                // do some stuff
                console.log("All images loaded!")
            }
        }
    },
    true // Capture event
);

为了支持例如不处理捕获阶段的 IE8，您应该将 onload 事件设置为特定图像，一旦它们被添加到 DOM 中，在 script onload 事件中设置它。