title: jQuery image src change after load
body: <p>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...</p>
  
  <p>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...</p>
  
  <pre><code>$(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]);
                            });
          });
  
       });
  
  });
  </code></pre>
  
  <p>for the sake of the example, test/page.html could be simply</p>
  
  <pre><code>&lt;p&gt;Picture of a House&lt;/p&gt;
  &lt;img src="house.jpg" alt="Particular house" width="640" height="480" /&gt;
  </code></pre>
  
  <p>I should also ask whether there is a better way to achieve this (likely!)?</p>
  
  <p>EDIT:</p>
  
  <p>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:</p>
  
  <pre><code>$.get("test/page.html" ,"" ,function(data) {
        var x = $(data);
        alert("pausing...check logs");
  });
  </code></pre>
  
  <p>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...</p>