Question

我想找到特定元素（div）中具有“完整”属性的图像数量（如在浏览器中已完成加载）。

我现在已经磕磕绊绊了一个多小时，我的脑子已经完全油炸了。一些帮助将非常感激。

由于

Answer 1

要回答您的直接问题以查找具有complete属性的图片，您可以使用：

var container = document.getElementById("div_id"),
    images = container.getElementsByTagName("img"),
    completeImages = [],
    j = images.length,
    i, cur;
for (i = 0; i < j; i++) {
    cur = images[i];
    if (cur.complete) {
        completeImages.push(cur);
    }
}

运行此代码后，completeImages是一个<img>元素数组，其complete属性为true。

使用jQuery，您可以使用：

var images = $("#div_id").find("img").filter(function () {
    return $(this).prop("complete");
    // or
    return this.complete;
});

在这种情况下，images是<img>元素的jQuery对象（类数组对象），其complete属性为true。

不是检查complete属性，而是使用load事件来检测它们何时加载并为它们设置特殊数据：

$("#div_id").on("load", "img", function () {
    $(this).data("image-complete", true);
});

并找出装载的数量/数量：

$("#div_id").find("img").filter(function () {
    return $(this).data("image-complete");
});

请注意load的{{1}}事件不完全支持/可靠：http://api.jquery.com/load-event/ - 向下滚动到“与图像一起使用时加载事件的注意事项”部分。

Answer 2

您还可以使用类重新创建相同的行为 -

$("img").load(function(){
  $(this).addClass('complete');
});

现在，只要您想查看已加载了多少图像，就可以使用此选择器 -

$("img.complete").length

如何找到“完整”图像的数量？

2 个答案: