поверните URL изображения в теге img, чтобы предварительно загрузить все

В настоящее время я пишу приключение P & C HTML5.

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

Моя идея состояла в том, чтобы создать единый <img> и сделать его visibility: hidden; , поэтому пользователь ничего не видит.

После каждого загруженного изображения я хочу выполнить функцию, которая обновляет панель прогресса.

Поэтому я сделал что-то вроде этого:

loadImages: function () {                                                       
    $('#preLoader').attr('src', this.__images[0]).on('load', this.loadCallback);
},                                                                              

loadCallback: function () {                                                     
    this.__images.splice(0, 1);                                                 

    Game.events.trigger('progressbar:bar:step');                                

    if(this.__images.length > 0) {                                              
        this.loadImages();                                                      
    }                                                                           
    else if(!this.__fired) {                                                    
        this.__fired = true;    

        this.trigger('finished');                                             
    }                                                                           
}.$bound(),      

this.__images - это массив, содержащий все загружаемые URL-адреса, функция обратного вызова в основном вызывает обновление панели выполнения и проверяет, остались ли изображения, а затем снова вызывает первую функцию.

Дело в том, что, по-видимому, событие load действительно не дожидается загрузки изображения, потому что в течение 1 мс после изменения атрибута src из <img> обратный вызов запускается.

Так что это может работать неправильно

Есть ли способ достичь этого, как я хочу?

В принципе, я хочу, чтобы изображение было загружено полным, а затем запустило обратный вызов, затем снова загрузило изображение и т.д., Пока все изображения в массиве не будут загружены.