I have an application that displays images from network cameras. The application will show multiple images on a single page. Each image container has a button on it that causes jQuery to scale that image up to fill a 64x480 div vs much smaller when multiple images are present.

I change the src in the image with jquery as you'd expect:

$("#imageId").attr("src", "http://cameraUrl.com:6000?width=640&height=480&d="+date.getTime());

the date.getTime() is intended to override the caching in a browser. It works for retrieving still images.

Sometimes the video changes to the larger resolution. Other times it just sticks with the original image scaled up to fit the larger div as if it is not loading the new URL. This is evident by the fact it's grainy and the text overlay from the camera is scaled up. Occasionally the image finally loads in the higher resolution version and it works evidenced by the image clarity and the text overlay scaling to what it should be.

Is there a correct way to force the setting of an image src where the src points to a motion jpeg stream to reload?