Есть ли способ определить, когда 4 изображения были загружены с помощью JS?

Question

У меня 4 изображения на странице. Я хочу вызвать событие JS, как только все 4 изображения загружены. Я, конечно, не уверен, в каком порядке будут загружаться изображения, поэтому я не могу вызвать событие на последнем изображении. Одна мысль заключалась в том, чтобы иметь счетчик, но я не могу придумать лучший способ проверить, когда этот счетчик равен 4, поскольку мне не нравится идея проверки setTimeout () каждые 200 мс.

Есть еще идеи?

Я использую на сайте jQuery, поэтому думаю, что это может помочь.

Это изображение HTML-код:

<img src="/images/hp_image-1.jpg" width="553" height="180" id="featureImg1" />
<img src="/images/hp_image-2.jpg" width="553" height="180" id="featureImg2" />
<img src="/images/hp_image-3.jpg" width="553" height="180" id="featureImg3" />
<img src="/images/hp_image-4.jpg" width="553" height="180" id="featureImg4" />

Answer 1

Что касается примера Солти , лучше всего использовать замыкание, чтобы избежать глобальных переменных, таких как:

$("img").load(function() {    
    var count = 0, numImages = $("img").size();

    return function () {
        if (++count === numImages) { 
            //All images have loaded    
        }
    };
}());

[Изменить]

Согласно комментарию jeroen , я заменил жестко закодированное значение 4 (count === 4) на функцию jQuery size, чтобы обеспечить большую гибкость в функции.

Answer 2

count=0;
$("img").load(function() {
    count++;
    if(count==4) { //All images have loaded
        //Do something!
    }
});