检查.ajax请求后加载的所有图像？ [英] check all images loaded after .ajax request?

问题描述

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

I need to know when all images are loaded from appended html source to perform another function. How can I check that?

$(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源：

I'm appending html source like this:

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

它成功地提供了html源代码，但是我无法找到来自该源的所有图像的加载时间

It gives html source successfully, but I can't find out when all images from that source is loaded

.container更新< a href =/ itemsclass =load-more>加载更多< / a>

.container updates every time link is clicked <a href="/items" class="load-more">Load more</a>

并且.container来源如下所示：

and the .container source looks like this:

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

推荐答案

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

On all browsers supporting event capturing phase, you can capture onload event for all new added images:

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中，在脚本 onload事件中设置它。

To support e.g IE8 which doesn't handle capturing phase, you should set onload event to specific images once they are added in the DOM, setting it in script onload event.

这篇关于检查.ajax请求后加载的所有图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！