How to change img src on document ready before browser downloads images?

Question

On my page I have some images on thisdomain.com/images. on document.ready(), I change the src attribute of images to thatdomain.com/images. Firebug's Net tab shows me that images are downloaded from both thisdomain.com and thatdomain.com. How can I prevent the browser from downloading images from thisdomain.com?

$(document).ready(function(){
    $("img").each(function() {
        var $img = $(this);
        var src = $img.attr("src");
        $img.attr("src", src.replace(/thisdomain.com.com\/images/i, "thatdomain.com\/images"));
    });
});

EDIT: ASP.NET server-side override of Render() using code "in front" i.e., <script runat="server"> I just added this to the aspx page without recompiling code-behind. It's a bit hack-ish but it works.

<script runat="server">        
    static Regex rgx = new Regex(@"thisdomain.com/images", RegexOptions.Compiled | RegexOptions.IgnoreCase);
    protected override void Render(System.Web.UI.HtmlTextWriter writer)
    {   
        using (HtmlTextWriter htmlwriter = new HtmlTextWriter(new System.IO.StringWriter()))
        {   
            base.Render(htmlwriter);
            string html = htmlwriter.InnerWriter.ToString();

            string newHtml = rgx.Replace(html, "thatdomain.com/images");
            writer.Write(newHtml.Trim());
        }
    }
</script>

Answer 1

This sounds like something that is impossible to achieve reliably, because images will start to load asynchronously as soon as a src has been specified.

I can't think of a workaround. The <base> tag would allow for some kind of "mass redirection" but the URIs would have to be relative ones for that to work.

I'm sure you have your reasons for outputting thisdomain.com in the first place, but I'm pretty sure you'll have to change your code so thatdomain.com gets output instead (or no src gets specified at all so you can add them using jQuery) if you want a 100% watertight solution.

Answer 2

I don't that is possible at all. To use jQuery functions, the jQuery library needs to be downloaded, which probably means the browser already started downloading other assets, such as images.

Answer 3

You can't be completely sure to prevent downloading by changing the URL after the element has been parsed. The closest possible that you can get is by changing it immediately after the element:

<img id="something" src="http://www.thisdomain.com/images/hello.gif" />
<script type="text/javascript">
var $img = $('#something');
$img.attr("src", $img.attr("src").replace(/thisdomain.com\/images/i, "thatdomain.com\/images"));
</script>

Answer 4

I don't think there is a way to halt GET requests from img elements once the page has loaded. It's difficult to suggest an alternative since I'm not sure what you're trying to achieve.

Can you be more specific?

Answer 5

This ain't going to work in the client side. Your best bet is a server side solution. Have the server side script (PHP? JSP? ASP? etc) to read the to-be-included HTML source and replace the src's accordingly with help of a decent DOM parser before it get emitted to the client side.