JQuery массив Deferred для предзагрузчика изображений

Question

Я пытаюсь вызвать функцию после загрузки всех изображений в предопределенном массиве.

Пытаясь что-то вроде этого

for (var i = 0; i < length; i++) {
           d = $.Deferred();
           promises.push(p);

           img = new Image();

           img.onload = function(){
               p.resolve
           }
           img.src = srcs[i];
       }

$.when.apply($, promises).done(function(){
           defImages.resolve();
       })

Это не работает. Что я делаю неправильно?

Answer 1

   //count of all page images
var img_count=$('img').length;
   //images loaded
var img_loaded=0;

$('img').load(function(){
 img_loaded++;
 if(img_loaded==img_count){
  console.log('all images loaded');
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/CC-Zero-badge.svg/100px-CC-Zero-badge.svg.png">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/CC-BY_icon.svg/100px-CC-BY_icon.svg.png">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/CC-BY-SA_icon.svg/100px-CC-BY-SA_icon.svg.png">