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，您应该在将特定图像添加到DOM中后将其设置为特定图像，并将其设置为script onload事件。

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

1 个答案: