IE doesn't recognize JQuery content-loading

I'm using a JQuery script to load, hide and show content on a page, with a gi开发者_如何学Pythonf file that's visible to the user while the content loads on the page. This works in Safari and Firefox but not on IE. The user can see the content loading.

Thanks for any suggestion on how to resolve this.

The JQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
      $("#content-loading").show();
$("#block_a").hide();
  $(window).load(function() {
    $("#block_a").show();
    $("#content-loading").hide();
  })
})
</script>

The div containing the gif:

<div id="content-loading">

It might be that you're using $(document).ready to show the content-loading gif and hide the block_a. Try putting this in a CSS stylesheet at the top of your page:

#block_a { display:none; }

That will hide the block immediately.

You are hiding the content in the ready event, which occurs when the entire document is loaded. Also Internet Explorer doesn't have any DOMContentLoaded event, so it occurs slightly later there as jQuery has to use the readyStateChange event instead.

You should hide the content using CSS instead, that way it's hidden already when it comes into existance:

<style type="text/css">
#block_a { display: none; }
</style>

You can still use the jQuery show method to show the content from the load event.