CODEWITHSUNDEEP
jqueryvolusion
AndrewMRiv
AndrewMRiv

Reputation: 165

Change Image SRC before page loads original src

right now I am using the following JQuery code to change all of the image SRCs on a page to access my other image server which has a higher bandwidth limit.

$.each($("img"), function( index, value ) {
    srcValue = "http://different-server.com/" + $(this).attr("src")
    $(this).attr("src", srcValue)
});

So

src="v/image1.jpg"
src="v/image2.jpg"
src="v/image2.jpg"

Would become:

src="http://different-server.com/v/image1.jpg"
src="http://different-server.com/v/image2.jpg"
src="http://different-server.com/v/image3.jpg"

A client is using Volusion for their shopping cart. They are forced to host their shopping cart on Volusion's servers which only allows 3gb of Bandwidth usage per month and they charge a lot for going over.

The cart is built in ASP but I have no access to the ASP pages but only to template files and we are not allowed to link product images to an external source.

I was successfully able to download the image files for the shopping cart products and host them on another host with no bandwidth limit but I feel that this code changes the src AFTER the browser loads the original image SRCs so in the end, the bandwidth usage issue is still present.

The client is not willing to switch to a self-hosted option so I am left to figure out a solution to reduce their bandwidth usage as much as possible so that they are not overcharged in the future.

Is there anything more I can do to force the image srcs to be changed before the page loads since I only have access to editing template files?

Thank you.

Upvotes: 0

Views: 2294

Answers (2)

user357034
user357034

Reputation: 10981

Each Volusion product has two fields where you can specify the URL, Photo URL Small and Photo URL Large. This can point to an internal or external location for the product images.

Upvotes: 1

jfriend00
jfriend00

Reputation: 707198

From client-side Javascript, you cannot change an img.src in the HTML of the page before the browser starts to load it. You are not going to be able to fix your problem from client-side Javascript alone.

The reason for this is that you can't modify a DOM object with Javascript until it has been parsed by the browser and has become part of the DOM and by the time that has completed, the browser may have already started to load the image from its original URL. So, you're stuck. You can't get to it with Javascript until it has already started to load which means your low bandwidth server has already seen the request before you could change the URL.

The real solution here (which I presume you know) is to change the HTML of the page to fix the URLs. Or, if you wanted the hostname for the images to be set via Javascript, then you could change the img tags to use a data-src property and no src property and then you could use Javascript to set the src property to what you wanted. This would work because when the images have no src property, the browser can parse the <img> tag, but won't start loading anything (since there is no src property).

Server-side proxies configured to rewrite the images URLs could also be used.

Upvotes: 0

Related Questions