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

Хорошо, я схожу с ума по этому поводу. Я читал здесь, в SO, и гуглил об этом, у меня даже есть установленный предварительный загрузчик (найденный здесь, на SO), но ни один из найденных мной плагинов / кода мне не помог.

Что я хочу сделать, это подождать, пока все изображения будут предварительно загружены, и только затем выполнить весь остальной код javascript. Насколько я понимаю, он может (но не обязательно) иметь сообщение «загружается ...».

Дело в том, что у меня есть довольно большое изображение на заднем плане тела и два других изображения, которые также больше, и поэтому я хотел бы предварительно загрузить их, чтобы они отображались мгновенно и не имели такой уродливой "загрузки" эффект изображения.

Это то, что я использую сейчас, но это не очень хорошо:

$(document).ready(function()
{    
     preloadImages();
     ...some other code...

    function preloadImages(){
         imagePreloader([
            'images/1.png',
            'images/2.jpg',
            'images/3.png',                
         ]);
     } 

     function imagePreloader(arrayOfImages) {
         $(arrayOfImages).each(function(){
             (new Image()).src = this;
         });
     }   
}

Не знаю, может, мне стоит вызвать этот прелоадер где-нибудь вне. готов()? или что-то в этом роде, пожалуйста, помогите ...

Между прочим, да, я также читал этот пост и не знаю почему, но .ready () у меня работает быстрее: (

EDIT :
Хорошо, вот, наконец, я получил эту штуку, чтобы работать. Моя проблема? Я неправильно установил ожидающий div. Теперь это мой код: у меня есть загрузочный div, который я показываю поверх всего, а затем, когда загружаются все изображения (используя $ (window) .load (function () {...}); как я предложил, скрыть этот div.

    

                    
    


#loading
{
   background-size: 100%;
   background-color:#000;
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
   z-index:999;
}  

#waiting
{
   margin-left: auto;
   margin-right: auto;    
   position:absolute;
   top: 39%;
   left: 27.81%;
   width: 45%;
   height: 150px;    
   background-color: #FFF;
   border: 12px solid #FF771C;
   text-align: center;
}

И мой код jQuery следующий:

$(window).load(function()
{    
    $('#loading').addClass('hidden');  
    ...
}