jQuery $(document).ready() failing in IE6 but only after clearing Temporary Internet Files

Question

I'm experiencing problems with $(document).ready not getting executed in IE6, but only after clearing the Temporary Internet Files (so in fact the very first time this page is loaded). On refreshing the page or on later page loads, everything works fine.

This is the current setup:

• Portal page with frames, this portal page also has a window.load method (maybe we have a race problem with jQuery ready ??):

  window.onload = function () {
  try {
      expireCookie("COOKIE%2DID");
      loadMenu();
  } catch (pcbException) {
      reportError(pcbException);
  }
  }
  

  • In this portal page, our current page gets loaded. At the bottom of this page we have:

<script language="javascript">

try{

$("#CR").remove();

} catch(ex){ }

$(document).ready(function() { alert(typeof $); // check if method is getting executed RendererPageIsLoading(); // loads data in comboboxes and hides divs });

</script> </body>

I'm using the latest version of jQuery (1.4.2). Edit: jquery is getting loaded in the head section of the current page:

<script language="javascript" type="text/javascript" src="https://fulldomain/js/jquery.js"&gt;&lt;/script&gt;

Following topic didn't bring any solutions: http://stackoverflow.com/questions/463800/jquery-document-ready-failing-in-ie6

Answer 1

Someone suggested (he did remove his answer later on) that attaching a method to the window.onload did detach the method defined in the $(document).ready() event. However since the error only happened the first time the page was loaded, in my opinion this had to be a cache problem.

After further investigation we found out that IE6 was having problems with a transparent png that didn't get loaded correctly. Therefor the browser is waiting for the image to load and IE6 waits on images before it triggers the DOM ready event.

Conclusion: also check for transparent png images if having problems with IE6.

Answer 2

If you are adding a script immediately before the "/body" tag, you don't need to use:

$(document).ready(...);

As the document IS ready (bar from "/body" and "/html").

It is really useful if you have an external JavaScript file that may be loaded faster than the page - in which case it delays the execution until the DOM is ready (or in some browsers the DOM and HTTP requests... which is more like window.onload, which waits for all the images, for example).