Question

让我解释一下我想做什么。我开发了一个Web应用程序，在动画运行之前，我想确保动画中使用的图像已经加载到浏览器中。因此，这是我的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是全局声明的。我已经在chromes开发人员工具中检查了这个，并且由于某种原因，onload函数不会被解雇。这是HTML：

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

有什么想法吗？

Answer 1

如果你在.ready范围内宣布这个，我想那种迟到了。

也许通过javascript加载你的图片，然后你可以确定他们已经准备好了！

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

我不得不同意乔纳森的观点。位于here的jQuery处理程序的.ready个文档说明如下。

...当JavaScript提供执行代码时的加载事件    页面呈现，此事件在所有资产之前都不会被触发    如图像已被完全接收......

.ready（）方法是    通常与属性不兼容。如果加载    必须使用，要么不使用.ready（）或使用jQuery的.load（）    将加载事件处理程序附加到窗口或更具体的方法    物品，如图像。

如果您想确保首先加载图片，那么您可能需要使用

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

JavaScript onload函数没有触发

2 个答案: