JQuery is waiting for images to load before executing document.ready

问题

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.

回答1:

This was due to jQuery bugs #2614 and #3880 - there were definite problems with the ready code in IE in 1.2.6 and in 1.3 - and now a different set of problems in 1.3.1.

A larger discussion can be found here:
http://groups.google.com/group/jquery-dev/browse_thread/thread/3abf45d3fd4d50fc

And the ticket related to the issue can be found here (if you find additional issues with the fix, please re-open the ticket and post to the above jquery-dev thread):
http://dev.jquery.com/ticket/3988

I just landed a fix for this in SVN rev 6170.

I just pushed up a new nightly that you can use until 1.3.2 final comes out:
http://code.jquery.com/nightlies/jquery-2009-01-28.js

Sorry in the delay for getting a fix out - was traveling this week.

回答2:

There are some things that just can't be unit tested. Just confirmed in IE6+7 and 1.3.1. Holy hell, what a huge regression.

So, do you have time to report this? Just checked and it's not a known bug for 1.3.1.

回答3:

Here's an update of the ticket I submitted. It seems as if @Webdawson has attached a sample page to the ticket.

回答4:

yes i've added an example, its clearly a bug in IE6 & 7 (i havn't tested it in other IE versions). It seems as if the 1.3.1 Version has a lot of bugs. :(

Here is the example link: http://www.kollermedia.at/jquery_bug.html

来源：https://stackoverflow.com/questions/477463/jquery-is-waiting-for-images-to-load-before-executing-document-ready

标签

jquery

jquery-1.3