JQuery 在执行 document.ready 之前等待图像加载

发布于 2024-07-12 19:24:13 字数 1686 浏览 10 评论 0原文

更新： 该错误已被至少另外两个人证实。即使您没有阅读我的全文 - 如果您正在阅读本文并使用 JQuery 1.3.1，那么如果您依赖于 DOM 完成时想要执行的任何处理程序，请停止使用它但在页面图像加载之前。

更新2：感谢Tom（用户ID 20！）发布jQuery bug 跟踪器上的票证链接。

更新 3 - 2009/01/28： 该问题已得到妥善解决（对于那些无法恢复到 1.2.6 的用户）。对于当前使用 1.3.1 并需要立即修复的任何人，您可以阅读下面已接受的答案以获取指导。谢谢约翰。

我刚刚升级到 JQuery 1.3.1，我花了几个小时才意识到我心爱的

$(function( ) {  ... }

语法现在正在等待整个页面加载（包括图像），然后再执行函数体。当我尝试集成雅虎的菜单时，我看到奇怪的行为。（幸运的是，我的页面上有一些加载缓慢的图像，这让我意识到了这个问题）！

我制作了一个测试文件，因为我认为发生了更复杂的事情，但即使使用这个简单的文件，我仍然有相同的症状。

<head>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>   
   <script>
    $(function() {    
      alert("Ready"); 
    });
  </script>
</head>

<body>      
  <img src="<PATH_TO_DYNAMIC_IMAGE>_1.jpg" />
  <img src="<PATH_TO_DYNAMIC_IMAGE>_2.jpg" />
  <img src="<PATH_TO_DYNAMIC_IMAGE>_3.jpg" />
  <img src="<PATH_TO_DYNAMIC_IMAGE>_4.jpg" />       
</body>

不同版本的 JQuery 有不同的结果：

版本 1.2.6 中发生的情况是立即显示警报框，然后我看到其后面加载的图像（预期和记录的行为）。
1.3.1 版本中发生的情况是图像全部加载，然后才会显示警报框。

这是怎么回事！这是一个新功能（我无法想象为什么）还是一个错误？

重要提示：这似乎只是 IE 中的问题，而不是 Firefox

抱歉，我没有可公开访问的动态图像文件，以便其他人更容易看到此问题。如果您想测试一下，我建议使用从谷歌图像中随机挑选的大图像文件并清除缓存。

原文

Update:
This bug has been confirmed by at least two others. Even if you dont read my full post - if you're reading this and using JQuery 1.3.1 then stop using it if you're relying on any handlers that you want to execute when the DOM is complete but before the page's images have loaded.

Update2: Thanks to Tom (user id 20!) for posting the link to the ticket on the jQuery bug tracker.

Update3 - 2009/01/28: The issue has been properly resolved (for those for whom reverting to 1.2.6 is not an option). For anyone currently using 1.3.1 and needing an immediate fix you can read the accepted answer below for direction. Thanks John.

I just upgraded to JQuery 1.3.1, and it took me several hours to realize that my beloved

$(function( ) {  ... }

syntax was now waiting for the entire page to load (including images) before executing the function body. I was seeing strange behavior when trying to integrate Yahoo's menus. (Fortunately I had some slow loading images on my page which made me aware of the problem)!

I made a test file becasue I figured something more complex was going on, but I still had the same symptoms even with this simple file.

<head>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>   
   <script>
    $(function() {    
      alert("Ready"); 
    });
  </script>
</head>

<body>      
  <img src="<PATH_TO_DYNAMIC_IMAGE>_1.jpg" />
  <img src="<PATH_TO_DYNAMIC_IMAGE>_2.jpg" />
  <img src="<PATH_TO_DYNAMIC_IMAGE>_3.jpg" />
  <img src="<PATH_TO_DYNAMIC_IMAGE>_4.jpg" />       
</body>

Different versions of JQuery had different results:

What happens in version 1.2.6 is that alert box is shown instantly and then I see the images loading behind it (expected and documented behavior).
What happens in version 1.3.1 is that the images all load and only then will the alert box be shown.

Whats going on! Is this a new feature (I cant imagine why) or a bug?

Important: This only seems to be an issue in IE and not firefox

Sorry I dont have a dynamic image file that is publically accessible to make it easier for others to see this. If you want to test it out I suggest using a large image file picked randomly from google images and clear your cache.

分享到QQ

分享到微博