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

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

3 个答案: