Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Wait for images to load and then execute all other code

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');  
    ...
}
like image 432
Nikola Avatar asked May 03 '11 13:05

Nikola


People also ask

Does Document Ready wait for images to load?

The document. ready() function will be executed as soon as the DOM is loaded. It will not wait for the resources like images, scripts, objects, iframes, etc to get loaded.

Can we preload images?

Preload lets you tell the browser about critical resources that you want to load as soon as possible, before they are discovered in HTML. This is especially useful for resources that are not easily discoverable, such as fonts included in stylesheets, background images, or resources loaded from a script.


1 Answers

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.

like image 118
Kevin Ennis Avatar answered Oct 04 '22 21:10

Kevin Ennis