Changing background with jQuery getting stuck or can't update img's src attribute

Question

I've spent a few hours now trying to figure this one.

I've got a store display that cycles through properties and I've knocked up a simple gallery sort of script. For the last week it has worked beautifully.

I went in today to tinker some unrelated JavaScript (but on the same page) and now there is an issue.

To make the images fade to each other, I update the img's src, and then fade it out over the next image of the img element's containing element's background.

What seems to happen now is that occasionally the #main-image's background gets stuck on a previous image, despite me setting it with jQuery's css() method.

It is available to view here

http://vanquish.websitewelcome.com/~utopia66/store-display

I must stress this is happening in Google Chrome, and I am targeting that browser only.

For your convenience too I have sped up the rate of cycling through images to save you time.

So, why is the image getting stuck and how can I fix it? update on closer inspection it may be that the img element is getting stuck, i.e. it can not update the src attribute. updating again actually I'm pretty sure it is the background.

JavaScript is here

http://vanquish.websitewelcome.com/~utopia66/assets/js/display.js

I very much appreciate any help!

Thanks a bunch.

Answer 1

I'm pretty sure I solved it by wrapping the backgroundImage values with double quotes like this.

$('#something').css({ backgroundImage: 'url("' + pathToImage + '")' });

Some of the newer images had parenthesis in their filename.

One of the more frustrating ones!

Thanks if anyone looked into it for me :)

Answer 2

What I've found with images and fade-in/out is to do it after the image is loaded. This will fix flicker type effect when the image is first loaded after a refresh:

$('#something').attr('src', 'pathToImage').load(function(){$(#something).fadeOut('slow')});