title: jQuery unveil load images in viewport added via ajax
body: <p>I'm using jQuery unveil <a href="http://luis-almeida.github.io/unveil/" rel="nofollow">http://luis-almeida.github.io/unveil/</a> plugin
  to lazy load images. But I'm confused about this behavior:</p>
  
  <p>If I load images via AJAX and append them into viewport, I need to scroll webpage to load images. The images do not load unless I scroll. </p>
  
  <p>I tried to solve it via recall function to load images after they are written via .html(), but nothing happens:</p>
  
  <p>Here is part of code, which I'm trying to use:</p>
  
  <p>I redefined html function to be able to connect callback to it and try to call function lazy_load() after .html() is done.</p>
  
  <p>Do you have any ideas, how to solve it? Thank you</p>
  
  <pre><code>// create a reference to the old `.html()` function
  var htmlOriginal = $.fn.html;
  
  // redefine the `.html()` function to accept a callback
  $.fn.html = function(html,callback){
    // run the old `.html()` function with the first parameter
    var ret = htmlOriginal.apply(this, arguments);
    // run the callback (if it is defined)
    if(typeof callback == "function"){
      callback();
    }
    // make sure chaining is not broken
    return ret;
  }
  var lazy_load = function(){
              $(document).find('img.lazy-load').unveil();
      };
  products_wrapp.html(data.products_html, function(){ 
                      lazy_load();
  });
  </code></pre>
  
  <p>COMPLETE UNVEIL INTEGRATION:</p>
  
  <p>I load unveil plugin, after jquery.js, before <code>&lt;/body&gt;</code> element.</p>
  
  <p>Here is code:</p>
  
  <pre><code>// I edit html function to use callback at this function...
  
  // create a reference to the old `.html()` function
  var htmlOriginal = $.fn.html;
  
  // redefine the `.html()` function to accept a callback
  $.fn.html = function(html,callback){
    // run the old `.html()` function with the first parameter
    var ret = htmlOriginal.apply(this, arguments);
    // run the callback (if it is defined)
    if(typeof callback == "function"){
      callback();
    }
    // make sure chaining is not broken
    return ret;
  }
  
  $(document).ready(function() {
     /* --------------------------------
         lazy load
         -------------------------------*/
      var lazy_load = function(){
              $(document).find('img.lazy-load').unveil();
      };
      lazy_load(); // call function for first time
  
  
      // load products, put them into products_wrapp element, after
      // html() is done -&gt; apply lazy_load
      products_wrapp.html(data.products_html, function(){ 
                      lazy_load();
                  });
  }
  </code></pre>