jquery - 如何检查是否加载了附加 HTML 的所有图像？

Question

如何检查是否加载了附加 HTML 的所有图像？代码如下所示：

$.ajax({
    url: "../api/listings",
    type: 'GET',
    success: function (html) {
        $('#container').append(html);
    };
});

$newItems包含一些IMG。加载后我需要运行一个函数。我尝试将此添加到成功功能： $('#container').on('load', function(){console.log('hello world!')});但它没有用

Answer 1

$.ajax({
    url: "../api/listings",
    type: 'GET',
    success: function (html) {
        $('#container').append(html);
        $('#container img').on('load', function(){console.log('images loaded')});
    };
});

Answer 2

尝试这样的事情。创建一个像这样的全局变量，var allImagesLoaded = true;然后在附加的 HTML 上添加一个 onerror 处理程序，将全局变量设置为 false。在超时或类似情况后检查它

Answer 3

看看这个库：https ://github.com/desandro/imagesloaded/

它允许您侦听特定元素中加载的图像。

如 ：

$('#container').imagesLoaded(function(){
 console.log("All images loaded!");
})