JavaScript onload function not firing

Question

Let me explain what I would like to do. I have developed a web app and before my animation runs I would like to make sure that the images used in the animation have been loaded into the browser. As such here is my JavaScript:

$(document).ready(function(){

    $.mobile.loading( 'show', {
                                text: 'Downloading Web App',
                                textVisible: true,
                                theme: 'a',
                                html: ""});

    document.getElementById('Logo').onload = function()
    {

        if(KeepCount == 0)
        {
            KeepCount++;
        }
        else if(KeepCount == 1)
        {
            KeepCount = 0;
            $.mobile.loading( 'hide' );
            StartSplash();
        }
    };

    document.getElementById('Hand').onload = function(){

        if(KeepCount == 0)
        {
            KeepCount++;
        }
        else if(KeepCount == 1)
        {
            KeepCount = 0;
            $.mobile.loading( 'hide' );
            StartSplash();
        }
    };
});

KeepCount is declared globally. I've checked this in chromes developer tools and somehow the onload functions are never fired for some reason. Here is the HTML:

 <img id='Logo' class="logo objecttransition"  src="css/images/Logo.gif">
    <img  id='Hand'  class="hand objecttransition"  src="css/images/hand.gif">

Any ideas?

inside of jquery's $.ready function, it is very likely that the images have already loaded by the time you assign the onload event. onload won't fire if the images have already been loaded. — Jonathan Kuhn
– Jonathan Kuhn, Commented Jan 26, 2014 at 7:31

Kevin · Accepted Answer · 2014-01-26 07:45:12Z

1

I would have to agree with Jonathan. The jQuery docs for the .ready handlers located here, state the following.

...While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received...

The .ready() method is generally incompatible with the attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.

If you wanted to make sure images were loaded first, then you may want to use

$(window).load(function()
{
  ...
});

answered Jan 26, 2014 at 7:45

Kevin

2,8221 gold badge26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Konstantin Krass · Accepted Answer · 2014-01-26 07:45:02Z

1

If you declare this in .ready scope, i guess that kind of late.

Maybe load your images by javascript, then you can be sure they are ready !

function startLoadImages(){
 var image = new Image();
 image.load = function(){
  // i am done, inject me !!
 }
 image.src = "css/images/Logo.gif"
}

$(document).ready(function(){
  startLoadImages();
});

answered Jan 26, 2014 at 7:45

Konstantin Krass

8,6461 gold badge20 silver badges24 bronze badges

Collectives™ on Stack Overflow

JavaScript onload function not firing

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related