html/js dynamic image source perf question

[D.P.]

I don't normally do web stuff so I have a question that might seem stupid.

I have something akin to a stopwatch which shows a count down and I update the text in the div once second. All is fine so far.
I have a background image, one when the countdown is greater than zero, one at zero. To change the image I grab the IMG I'd and change the SRC property depending on the state (>0).

This works but I wonder if it is bad to keep setting the image source even when the image doesn't change? I don't want The image reloading every second. I wonder if the browsers simply see the URL is the same so doesn't do anything.


Will post code tomorrow if need be.

 

[D.P.]

^^ Makes sense. Changing an img src to the same value as it already holds won't cause the browser to request the image again, though.

This is what I want verified, Tripnologist is what I was about to code but if the image isn't reloaded for the same source then I wont need to bother with any additional booking and the browser can handle it.

 

[D.P.]

^ I agree, using CSS sprites would be a better solution as it means that the image is loaded once so there is no waiting for the second image to download on change of src.

The download appears really quick, I certainly don't notice a download period. And I assume the browser should cache both images?

 

[D.P.]

Can't say I have noticed any delay in loading the image, or any kind of flickr.

I will probably have the image source change only when necessary but for the time being I have way worse issues. Everything is rendering find on Firefox but chrome Seems to be ignoring the style information of a text overlay.

 

[D.P.]

^ Yep. Just because you have a half decent connection, doesn't mean someone else will. Using sprites means there will be zero latency in loading the second image.

Will try this out later in the week but I fear it. Igbo break some,thing on some browser. Had huge issues getting something simple working on both forefox and chrome.

 

[D.P.]

All you got to do when the timer hits zero set the call back to move the image, left, right, up or down the total height of the image. You can make it responsive by getting the container height and image height using outerWidth and height with jQuery, will be very nice in the end.

Sorry for the crap explanation, I suck at explaining jQuery.

I understand the concept so will give it a try when I have time.