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

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是一个jQuery对象(类似于数组的对象)的<img>元素,其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事件不是完全支持/可靠的<img>s:http://api.jquery.com/load-event/ - 向下滚动到"与图像一起使用时加载事件的注意事项"部分.