Page Load on Refresh in IE8

Question

I'm developing a website and I'm getting a lot of inconsistencies with loading when refreshing a page. Clicking on links functions as expected; no issues there. The problem only occurs when REFRESHING a page. You will notice how it takes forever to load, and in some instances, refuses to load at all.

http://annualreview.com.au/caltex/2012/

The site was built using WordPress 3.5.1 (http://wordpress.org) and Foundation 3.2.5 (http://foundation.zurb.com/).

Any assistance on this matter would be greatly appreciated. I'm out of ideas.

Thanks.

Update: This may not be IE related. The problem seems to exist in other browsers as well.

Answer 1

It sounds like there is a timing based issue being introduced within respond.js. It may have javascript code that is directly inline in the js file, and is not wrapped in an event such as document.ready. This would cause it to execute immediate as the page loads and reads the js and could cause inconsistent page load behavior depending on how fast or slow things happen.

If this is the case a quick workaround might be to wrap the entire contents of the respond.js file in the document ready event handler so that the code doesn't execute until everything has finished loading.

$(document).ready(function(){
    //respond.js contents here..
});

With that said, I would check the IE or Chrome developer tools console to see if any js errors are happening. If still no luck I would re-trace the page load logic to try to identify where a timing related problem could exist and go from there. You can add console.log entries in your code to help you trace through it at runtime and determine the flow. The log entries may make it obvious as to where the problem originates.

Answer 2

Looking at Firebug, there are huge delays in trying to load the images. Each image is blocking until the previous image has been loaded - tried refreshing the page a few times and the images are taking between 1 and 11 seconds every time.

Image of Firebug results:

I'm not very knowledgeable in image optimisation, but after a quick search, found a couple of ways you could try to optimise the load times:

• CSS Sprites - this is unlikely to be useful to you looking at the dimensions of the images, and may be tricky to implement the image fades, but worth mentioning in case can be implemented elsewhere within the website.
• The other thing you could try, is using other image hosting sites, such as Flickr or Amazon S3. Browsers tend to only let you have 2 connections to the same server at a time (with all your images being on the same server, you're getting the long blocking times), but allow connections to 8 different servers simultaneously, so using the third party sites may improve load time for you.