Loading lockup on internet explorer

Question

Hi,

I am programming an application using AJAX and facebook connect. The location of the application is http://dev.cafexi.com/fbconnect

I'm having what I think is a simple issue

1) when I load the site in any browser except for IE it loads instantaneously - so no issues there

2) When I load in ie 7 or ie 8 it load incredibly slow. Half the page loads, then it starts doing some javascript calls from facebook and about 15 sec later the page resumes loading. Any ideas on what may be cassing this?

Do you think that there is a javascript that is causing the issue or do you think there is something with the html? Any suggestions on what I could investigate further would be great!

Answer 1

You may be modifying the DOM before it is done loading. IE6 is very sensitive -- if you change a node before it has a chance to finish parsing, I think it corrupts its own rendering engine.

Add a script tag as the last dom node which sets a global variable, then check that variable before doing anything else. Try this, and then roll a boot-strapper that will run the rest of you JS after DOM:Load.

Answer 2

I had a similar problem on Facebook with IE 6 and 7. In my scenario I wasn't able to use any document.onload or jQuery's $(document).ready or logic to make sure script executed at the right time, which would be the ideal means of making sure the code doesn't execute before the DOM has loaded and is ready. Seeing as your application is Facebook connect this should be easy to implement?

I managed to get around the issue in a Facebook app (FBJS) by putting the javascript I needed to execute in a short setTimeout block (100ms). Probably a bit sloppy, but got my app loading correctly again in IE.