D'attente pour les images à charger, puis exécuter tout autre code

OK, je vais perdre mon esprit sur ce. J'ai lu ici et DONC google à ce sujet, j'ai même eu le preloader set (trouvé ici), mais aucun de ces plugins/code que j'ai trouvé m'a aidé.

Ce que je veux faire: attendre jusqu'à ce que toutes les images sont préchargés et seulement ensuite exécuter tout autre code javascript. Pour autant que je suis concerné, il peut (mais ne doit pas être) avoir un message "chargement...".

Le fait est que j'ai une assez grande image en arrière-plan du corps et de 2 autres images qui sont également plus grandes, et donc, je tiens à précharger pour qu'ils ne montrent instantanément et n'auraient pas laid "chargement" effet d'image.

C'est ce que j'utilise maintenant, mais il n'est pas bon:

$(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;
         });
     }   
}

Je ne sais pas, peut-être que je devrais appeler ce preloader quelque part hors de la .prêt()? ou qqch comme ça, s'il vous plaît aider...

Btw, oui, j'ai aussi lu cette post et je ne sais pas pourquoi mais .prêt() fonctionne plus vite pour moi 🙁

EDIT:
Ok, donc finalement j'ai eu cette chose à travailler. Mon problème? I a été mise en le d'attente div mal. C'est mon code maintenant: j'ai le chargement de la div que je montre au-dessus de tout et puis quand toutes les images de la charge (à l'aide de $(window).load(function(){...}); comme l'a suggéré-je, cacher une div.

<div id="loading">
    <div id="waiting">
        <img class="loadingGif" src="images/loading.gif">            
    </div>
</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;
}

Et mon code jQuery est ceci:

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

OriginalL'auteur Nikola | 2011-05-03