IE Hanging on jQuery code

Question

Here's another clichéd problem, but I couldn't find an exact match to this.
I haven't posted any source here, as you can freely see all that is there on the link. :-)

Statement:I have a web page at http://agrimgupta.com/antaragni/

Disclaimer: Pardon me for the pathetic coding on that page. ;-) It was done on a very short interval. Improvements will be done at a later stage.

Observation: This page is functioning normally on my localhost on all browsers.

Problem: IE 8 is crawling (nearly hanging) while loading this page from the website. Although it is working fine on localhost. When on the website, It fails to render the mouseover effects, doing them in almost what seems like a minute.

Question: How to resolve this stuck up of IE? It is necessary to resolve this.

Thanks in Advance

Answer 1

Invalid HTML can cause your page to render slow. Fix the unclosed <link> tag on line 8 and try again. http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fagrimgupta.com%2fantaragni%2f

Answer 2

IMHO

first of all use CSS where possible like here

    $('#downloadsglow').hide();
    $('#blogglow').hide();
    $('#eventsglow').hide();
    $('#galleryglow').hide();

to

#downloadsglow, #blogglow , #eventsglow , #galleryglow { display:none }

or at least do this $('#downloadsglow,#blogglow,#eventsglow,#galleryglow').hide();

then make sure all the images are loaded before starting observing the mouseover!

something like

$(window).load(
    function() {
        // weave your magic here.
    }
);

then use the holy grail of png fix

• http://www.dillerdesign.com/experiment/DD_belatedPNG/

like this

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.pngimg');
</script>
<![endif]-->

Last but not least, since your site make use of a lot of PNG images i reccomend you to compress it, take a look at

• http://www.aboutonlinetips.com/optimize-and-compress-png-files/