title: Load html, then load images using Ajax in Jquery
body: <p>Basically what I'm looking for is performance here. </p>
  
  <pre><code>$.post(link,     
    function(data){
           //removes the image that was displayed while loading
           $("#loadingImg").remove();
  
           //append the new content, into the content div
           //and add a div around the new content in order to lazy load
           $("#content").append('&lt;div id="new-page"&gt;' + data + '&lt;/div&gt;');
           //lazy load the images inside the new div
           $("#new-page").find("img").lazyload({ 
                   placeholder : "/images/white.png", effect : "fadeIn" });
    });
  </code></pre>
  
  <p>I want to use the jquery plugin, <a href="http://www.appelsiini.net/projects/lazyload" rel="nofollow">lazy load</a>, to lazy load images that are appended to some content. Right now I can tell that the loading time with and without the lazyload line of that code is exactly the same (it's loading about 20 images). I'm now assuming that the $("#content").append() line waits for all the images to load before appending.</p>
  
  <p><strong>Is there any way to put the html in the page, halt the browser from loading the images in that html, and then load them as the user scrolls?</strong></p>
  
  <p>By the way, even when I do:</p>
  
  <pre><code>data = '&lt;div id="new-page-' + pageCounter + '"&gt;' + data + '&lt;/div&gt;';
  var newData = $(data);
  newData.find("img").lazyload({ placeholder : "/images/white.png", effect : "fadeIn" });
  $("#content").append(newData);
  </code></pre>
  
  <p>It still takes the same amount of time to load...</p>
  
  <p>Thanks for the help!</p>