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');  
    ...
}

Hospers

Just change ".ready" to ".load" and you should be all set. – Alisealisen

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.

Florencio

That's true. I forgot about that.. +1 – Conformable

Or the jQuery version: $(window).load(function(){ ... }); – Ellita

i can't get this to work: i would like to show nothing (blank white screen if you wish) until all my pictures load and then show the rendered page. can you maybe post a fiddle example? Thank you, I'm really stuck on this :( – Hospers

ah, nevermind, I finally got it to work. Thank you for your answer which is correct, but i was using the loading image wrong. – Hospers

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);

});

Intelsat

yes, i saw your plugin on one of the other threads, but I wasnt able to figure out how could it be used until all the image were loaded. Take a look at my main answer and edit on how I did it in the end. Don't know if this could also be done using your plugin? – Hospers

This saved me hours of work today. In fact, I'm finding all sorts of uses for it. – Disquisition

Answer 3

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

Hallie

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>

Expertize

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

Humpback

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

Pollerd