Is Onload Needed when Swapping Out Images?

Trying to save some bandwidth

[lexipixel]

I have (2) identical image files:

#1- www.example1.tld/dir/subdir/someimage.jpg

#2- www.example2.tld/dir/subdir/someimage.jpg

And I want to use Javascript to serve the image from "www.example2.tld" into a dynamic page on "www.example1.tld", (Why you ask? ...just to offload some bandwidth).

You'll note the image filename, paths, etc.. are all identical, only the domain names are different.

Below is the script I wrote to do it, (which does work), but I am wondering what I can do to trigger the JS replacement before the image is pulled from example1.tld

NOTE: In the page where I use this, the JS is coded in the BODY at the end of the page just before the /BODY tag, (so the whole page will load and the IMG tag with id="my_photo" will be in the DOM tree).

<script type="text/javascript">

if(location.href.indexOf('dynamicpage.asp') != -1) {

var ThisPhoto=document.getElementById('my_photo').src;

var ImgServer='www.example2.tld';

var ThisDomain=document.domain;

var NewImgSrc = ThisPhoto.replace(ThisDomain,ImgServer);

document.getElementById('my_photo').src=NewImgSrc;

}

</script>

What I am concerned with is that I believe most browsers will fetch the image from example1.tld, then fetch it again from example2.tld to replace it into the document once the client-side JS code is executed.

I don't want it to ever fetch the image from example1.tld if JS is working.

My Question: Do I need to use onLoad in the BODY tag or put a function in the head or do something else?

Footnote on accessibility: I am thinking that; since the images are available from either domain, if the JS doesn't load, the replace will never happen and the image will just be served from example1.tld, (which makes it "accessible" without JS).

[DrDoc]

I believe Fotiman made a post somewhere about in which order elements are loaded.

Nevertheless, I would be willing to bet that you will most likely always double-dip on the image. It will first be requested from example1.tld, then, as the JS is executed, requested from example2.tld, and subsequently replace the original one.

You should probably consider a server side scripting solution instead.

[Fotiman]

Right, I think that by the time the image is accessible in your DOM and you can access the image 'src', an HTTP GET has already been made to access the image on the local domain, thus you would be double-dipping.

Why not simply have the HTML markup point to the image on the first domain?

[lexipixel]

Why not simply have the HTML markup point to the image on the first domain?
-Fotiman

As I said, I need to offload some bandwidth to a fileserver.

It's a proprietary hosted solution and the vendor gives very little bandwidth, (and charges heavily for going over)... Some of the people using the system have thousands of these 'my_photo' images and they are loaded hundreds of thousands of times a month.

Aside the basic problem, the coding issues are:

- It's dynamically generated HTML from template based hosted software and I can't get at the code that generates the markup.

- the image URL is built on the fly from the site's domain name followed by a relative path and the file name.

- the single template is used in several areas of the site, (which is why I needed to evaluate if the string 'dynamicpage.asp' is in the URL, and find the IMG tag with the ID='my_photo').

A work around I came up with last night was to use the scipt I posted, but upload very small (highly compressed JPG) images onto example1.tld and put the high res ones on example2.tld

But, I'd still like a cleaner solution.