JavaScript onload函数未触发

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?

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

Answer 2

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