I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts I will will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

So, my question was as follows:

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 something like that? Btw, yes, I also read this post and I don’t know why but .ready() works faster for me.

The answer, by user Kevin Ennis, was this:

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.

My own solution was this:

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.

<divid="loading"><divid="waiting"><imgclass="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');...}

Additionally, user Alex had a great answer too:

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

My favourite quotes from the book Think and grow rich by Napoleon Hill:

All earned riches have a beginning and an idea.

We refuse to believe that which we do not understand.

We are the masters of our faith, the captains of our souls, because we have the power to control our thoughts.

Our brains become magnetized with the dominating thoughts that we hold in our minds, and these magnets attract to us the forces, the people, the circumstances of life which harmonize with the nature of our dominating thoughts.

Desire – the first step towards riches.

He did not say “I will try, he knew he would make it”.

Fix an exact amount you want in your head. Determine how much will you give back. Establish a definite date. Create a definite plan for carrying out your desire and begin at once. Write this all down. Read this statement twice a day. See yourself in possession of the money.

The object is to want money and to become so determined to have it that you convince yourself that you will have it.

No one ever is defeated until defeat is accepted as reality.

No one is ready for a thing until he believes that he can acquire it.

Our only limitations are those that we set up in our own minds.

Desire backed by faith knows no limit.

If you think poorly about yourself, your subconscious mind will take this and translate into physical equivalent.

Fate is a premise for everything.

Any idea, plan or purpose may be placed into mind by repetition of thought. That’s why you have to read/write your definite chief aim.

You come to believe what you constantly repeat to yourself.

If you think you’re beaten, you are. If you think you dare not, you don’t. If you like to win, but you think you can’t it’s almost certain you won’t. If you think you will lose, you lost. It’s all in the state of mind. You have to be sure of yourself before you ever win a prize. The man who wins is the man who thinks he can.

Any man is educated who knows where to get knowledge when he needs it, and to organize that knowledge into plans of action.

Anything acquired without effort and without cost is generally unappreciated, often discredited.

The person who stops studying merely because he finished school is forever hopelessly doomed to mediocrity.

There is no fixed price in an excellent idea.

The idea is the main thing. Specialized knowledge can be found just around the corner.

The only limitation is that which one sets up in one’s own mind.

No man is ever wiped, until he quits – in his own mind.

A quitter never wins, and the winner never quits.

The greatest among you shall be servant of all.

The world does not pay a man for that which they know, but for what they do, or induce others to do.

Every company has room for a man who has a definite plan of action which is to the advantage of that company.

Money without brains is always dangerous.

Riches do not come without effort.

With persistence will come success.

1. Definite purpose backed by a burning desire for its fulfillment.

2. A different plan expressed in continuous action.

3. Mind closed tightly against all negative and discouraging influences, including negative suggestions of relatives, friends and acquaintances.

4. A friendly alliance with one or more persons who will encourage one to follow through with the plan and purpose.

The sex energy must be transmuted from desire for physical contact into some other desire or action.

Faith and fear make poor bedfellows.

Pray for a thing and believe you will receive it.