14

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

我已经在这个问题上磕磕绊绊了一个多小时，我的大脑完全被炸了。一些帮助将不胜感激。

谢谢

4

2 回答 2

13

要回答您的直接问题以查找具有该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);
    }
}

运行此代码后，是一个具有as 属性的元素completeImages数组。<img>completetrue

使用 jQuery，您可以使用：

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

在这种情况下， , 是具有as 属性的元素images的 jQuery 对象（类似数组的对象）。<img>completetrue

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事件不完全支持/可靠<img>s: http://api.jquery.com/load-event/ - 向下滚动到“与图像一起使用时加载事件的注意事项”部分。

于 2013-04-17T18:00:05.547 回答
2

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

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

现在，每当您想查看已加载的图像数量时，您都可以使用此选择器 -

$("img.complete").length
于 2013-04-17T18:01:15.933 回答