JavaScript onload函数未触发 [英] JavaScript onload function not firing

问题描述

让我解释一下我想做什么.我已经开发了一个Web应用程序，在运行动画之前，我想确保动画中使用的图像已加载到浏览器中.因此，这是我的JavaScript:

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是全局声明的.我已经在chrome开发人员工具中检查了这一点，并且由于某种原因，从来没有触发过onload函数.这是HTML:

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">

有什么想法吗?

推荐答案

我必须同意乔纳森(Jonathan)的观点.位于此处的.ready处理程序的jQuery文档，请说明以下内容.

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

...虽然JavaScript提供了load事件以在以下情况下执行代码 页面已呈现，直到所有资产都未触发此事件 例如图像已被完全接收...

...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...

.ready()方法是 通常与属性不兼容.如果负载 必须使用，不要使用.ready()或使用jQuery的.load() 将加载事件处理程序附加到窗口或更具体的方法 项目，例如图片.

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

这篇关于JavaScript onload函数未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！