Как найти количество "полных" изображений?

Ответ 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/ - прокрутите вниз до "Оговорки о событии загрузки при использовании с изображениями".

Ответ 2

Вы также можете воссоздать одно и то же поведение с помощью классов -

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

Теперь, когда вы хотите увидеть, сколько изображений было загружено, вы можете просто использовать этот селектор -

$("img.complete").length