jQuery image src change after load

Question

Hi,

I'm using jQuery to replace an iframe sort of environment on a page by loading the pages content into a div instead of a url into an iframe...I don't have anything against iframes or anything but it just seems to be cleaner and more versatile (returning fragments of html etc) than having whole pages for that...

Anyway, using a simple example, will this load the image twice? or does it modify the src attribute before the browser tries to open the image? The reason it needs to be done at all is that it allows the fragment that is being loaded to have the images relative to it work but obviously once included in a page (in a different directory), the relative path is broken...but this is just an example i guess...

$(document).ready(function() {

    $("#a_get").click(function() {

        $("#content").load("test/page.html"
                          ,""
                          ,function() {
                              $("#content img").each(function(intIndex) {
                                  var src = $(this).attr("src");
                                  var srcArray = src.split("/");
                                  // change the src attribute
                                  $(this).attr("src","test/" + srcArray[srcArray.length-1]);
                    });
        });

     });

});

for the sake of the example, test/page.html could be simply

<p>Picture of a House</p>
<img src="house.jpg" alt="Particular house" width="640" height="480" />

I should also ask whether there is a better way to achieve this (likely!)?

EDIT:

Using @redsquare's method which I thought initially resolved the problem (the page didn't have a broken image, "blink", and then the correct image appear) as it was with my original code, however, checking the web server logs a request for the broken image is still being made...i've narrowed it down to this:

$.get("test/page.html" ,"" ,function(data) {
      var x = $(data);
      alert("pausing...check logs");
});

if I was to check the logs whilst the alert box is visible, a request to the images has already been made...does this mean that as soon as $(data) has been used the html gets "in some form" added to the page...? I ideally want to be able to manipulate all the elements in data without any sort of loading, and then add it to the page...

Answer 1

Dont use .load which appends the content into the div. Use .get, amend the response then append into the dom.

$.get("test/page.html" ,"" ,function(data) {
      $(data).find('img').each(function(intIndex) {
          var src = $(this).attr("src");
          var srcArray = src.split("/");
          // change the src attribute
          $(this).attr("src","test/" + srcArray[srcArray.length-1]);
      }).appendTo('#content');
});

Answer 2

Can you try the following...I got some help with the regex as it really is not my skill..!

$.get("test/page.html" ,"" ,function(data) {
       data.replace(/src='(?:[^'\/]*\/)*([^']+)'/g, "src='test/$1'")
       $('#content').append( data );
});

Answer 3

As soon as you are creating <img> tags - the browser will try to load them. Either through .load() or $(data) the browser is creating a IMG tag and setting src - effectively preloading them. The only way I could see getting around this is using a regexp like the one redsquare suggests. I saw a few improvements that could be made in the RE.

Here is an example allowing single and double quotes in src - I also scoped it to only search in img tags, and case insensitively. And just to show a slightly different approach - used $.ajax instead of get/load

$.ajax({
  url: 'test/page.html',
  dataType: 'text',
  success: function(data) {
    $('#content').append(
     data.replace(/<img([^>]*)\ssrc=['"](?:[^'"\/]*\/)*([^'"]+)['"]/gi, "<img$1 src='test/$2'")
    );
  }
});