Menu
I’m working on a bread-and-butter image rotator. You can see the general idea at the top of legionofvalor.guildportal.com – don’t look at the current code there; it’s not relevant.
I have a JS Image object outside the DOM whose src attribute I set to the URL of the next image. When the onload event fires, I change the src attribute of the visible image and execute the transition. So far, all very standard. But in this situation, it doesn’t actually work.
[B]The background
The images in question are stored at pbase.com. Their “durable” links are of the form [url]http://www.pbase.com/image/51387767.jpg[url]http://cakeru.image.pbase.com/image/51387767.jpg
[B]The problem
This redirecting breaks the standard image preloading scheme. The browser accepts the redirect, downloads the image data, and caches it under the actual (redirected) URL, not the canonical URL originally assigned to the Image object. If another Image’s src property is then set to the canonical URL, the browser will re-download the image from another server.
[B]What I think I need
Some way to ask an Image “What URL did your data come from, really?” Unfortunately, the src attribute is not updated. And actually, I have enumerated every attribute of the Image in question, and nothing looks at all promising. If I could find the server-specific URL, it would be fine to assign that same URL to the displayed image, and the data would then come from the cache.
[B]What I might really need
Any way of preloading images that accomodates the case in which the server does redirection on the image URLs. Or alternatively, some way of identifying the target of a redirected URL from within JavaScript.
I’ve spent hours looking for comments on this type of problem and have come up with absolutely nothing. I’m not sure if I’m using the wrong names for things or whether this is truly an uncommon problem. In any case, I’d appreciate any help or pointers.
Thanks,
Garth