Wait for images to load and then execute all other code

Question

OK, I'm losing my mind over this. I did read here at SO and google about it, I even have the preloader set (found here on SO), but none of the plugins/code I found helped me.

What I want to do is: wait until all images are preloaded and only then execute all other javascript code. As far as I'm concerned it can (but not a must) have a "loading..." message.

The fact is that I have a pretty big image in the body background and 2 other images which are also bigger, and so I would like to preload them so that then they would show instantly and would not have that ugly "loading" image effect.

This is what I'm using now but it's not good:

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

I don't know, maybe I should call this preloader somewhere out of the .ready()? or sth like that, please help...

Btw, yes, I also read this post and I don't know why but .ready() works faster for me :(

EDIT:
Ok, so finally I got this thing to work. My problem? I was setting the waiting div wrong. This is my code now: I have the loading div which I show above everything and then when all images load (using $(window).load(function(){...}); as suggested I, hide that 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;
}

And my jQuery code is this:

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

Answer 1

Instead of trying to preload, you could just execute your script on...

window.onload = function(){..}

That doesn't fire until all images have been loaded.

Answer 2

I have a plugin named waitForImages that lets you attach a callback when descendent images have loaded.

In your case, if you wanted to wait for all assets to download, $(window).load() may be fine. But you could do it a bit cooler with my plugin :)

var loading = $('#loading');

$('body').waitForImages(function()
{    
    loading.addClass('hidden');  
}, function(loaded, total)
{
    loading.html(loaded + ' of ' + total);

});

Answer 3

I think what you're looking for is javascript:onLoad(), which gets called as soon as the browser finishes loading.

Answer 4

You could display the image only once it is loaded like so :

<img src="hdimg.jpg" width="1920" height="1080" style="display:none;" id="img1">

<script type="text/javascript">
$('#img1').load(function(){
    $(this).css({'display':'block'})
});
</script>

Answer 5

The waitForImages pluggin is an interesting one, but the solution can be achieved just with:

    var counter = 0;
    var size = $('img').length;

    $("img").load(function() { // many or just one image(w) inside body or any other container
        counter += 1;
        counter === size && $('body').css('background-color', '#fffaaa');
    }).each(function() {
      this.complete && $(this).load();        
    });

Answer 6

I believe the best jQuery option is to use the ajax get call:

$.get('image.png', {}, function(){
    // Do whatever you want here, this wont execute until image.png is preloaded
});