title: Binding image lazy loading to new images inserted after ajax request
body: <p>I'm using Mika Tuupola's Lazy Load plugin <a href="http://www.appelsiini.net/projects/lazyload">http://www.appelsiini.net/projects/lazyload</a> to delay loading images as you scroll down a long image gallery. The problem is after 10 images, I use infinite scrolling so I fetch the next 10 images, and append them via ajax. Lazy Loading no longer works on this next batch of appended images. </p>
  
  <p>It's a pretty javascript-heavy image gallery, so for everything else (such as tooltips, modal overlays, etc) I've been using jQuery's delegate() to bind to ajax-inserted elements. The problem with the Lazy Load plugin is that I'm not sure what <em>event</em> to bind to. </p>
  
  <p>So say I want to lazy load images with a class of "lazy". I would write this:</p>
  
  <pre><code>$("img.lazy").lazyload({ 
      effect: "fadeIn" 
  });
  </code></pre>
  
  <p>and it works for the first 10 images, but stops working after inserting more via ajax. The only thing I can think of is to use delegate on a <strong>load</strong> event, like so:</p>
  
  <pre><code>$(document).delegate("img.lazy", "load", function(event) {  
      $(this).lazyload({ 
           effect: "fadeIn" 
      });     
  });
  </code></pre>
  
  <p>but that breaks everything. 
  Thanks!</p>
  
  <p><strong>EDIT:</strong>
  The jQuery I use to load more records (this is a Rails app):</p>
  
  <pre><code>$(window).scroll(function() {
      var url;
      url = $(".pagination .next_page").attr("href");
      if (url &amp;&amp; $(window).scrollTop() &gt; $(document).height() - $(window).height() - 50) {
      $(".pagination").html("&lt;p&gt;loading more images...&lt;/p&gt;");
      return $.getScript(url);
      }
  });
  
  $(window).scroll();
  </code></pre>