Problem with caching images on server- jQuery

Question

Hi I have the weirdest problem. I am implementing a simple gallery with a use of nivo slider jQuery plugin. Everything works perfectly when I test it on my local machine, however I am having an issue on an online hosted server.

The images do not tend to appear when you first open the website. There seems to be an issue with caching the images. when you reload the page (simple f5) everything works fine.

Rather than showing you the code, I think it would be better to show the site so you can see what firebug shows you: http://teslacreations.com/orangery/test.php

Does anyone have any ideas how to solve it?

Answer 1

Validate your XHTML! I had this exact problem with Nivo, and the issue was the containing div wasn't (under some circumstances) supplying the script with the proper dimensions.

My solution was to specifically state the dimensions of the container and viewport so nivo had something to grab onto.

If you're interested, take a look at the project here. Hope this helps.

Answer 2

Sorted! God why it is always like that, that when you're struggling with a problem for hours and finally decide to post a question in the Internet, you find solution yourself in few minutes? ;)

well, for the people who might have the problem in future - adding a timeout before associating div with images to the Nivo Slider jQuery funtion solves it.

Interestingly, I found out by checking the code of the creator of the plugin - eventhough he never mentioned using js timeouts, he does it himself.

Thanks very much for your input guys regards