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.
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.
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.
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:
I replaced Respond.js with the following script and the problem resolved itself. http://code.google.com/p/css3-mediaqueries-js