title: Jquery LazyLoad not working on ajax generated images and outputted in tabs
body: <p>I am using <a href="http://www.appelsiini.net/projects/lazyload" rel="nofollow noreferrer">http://www.appelsiini.net/projects/lazyload</a> but it is not working for an image result tabs that is generated by php loop and outputted using jquery ajax serializearray on bootstrap tabs. So I tried to put these codes in ajax success function and together with the output as  but nothing worked. </p>
  
  <pre><code>$("#container").one("click", function() {
    $("#container").load("images.html", function(response, status, xhr) {
       $("img.lazy").lazyload();
    });              
  }); 
  </code></pre>
  
  <p>Source: <a href="http://www.appelsiini.net/projects/lazyload/enabled_ajax.html" rel="nofollow noreferrer">http://www.appelsiini.net/projects/lazyload/enabled_ajax.html</a></p>
  
  <pre><code>$("img.lazy").lazyload({ 
      effect: "fadeIn" 
  }).removeClass("lazy");
  $(document).ajaxStop(function(){
     $("img.lazy").lazyload({ 
         effect: "fadeIn" 
     }).removeClass("lazy");
  });
  </code></pre>
  
  <p>Source: <a href="https://stackoverflow.com/questions/10035985/binding-image-lazy-loading-to-new-images-inserted-after-ajax-request?answertab=oldest#tab-top">Binding image lazy loading to new images inserted after ajax request</a></p>
  
  <p>Thanks for the help!</p>
  
  <p><strong>Update</strong></p>
  
  <p>Part of the problem is found by setting the container. This code is added in ajax success function.  </p>
  
  <pre><code>                           $("img.lazy").lazyload({
                                  threshold : 100,
                                  effect : "fadeIn",
                                  container: $(".resulttab, .resulttab2")
                              }); 
                              $('.resulttab, .resulttab2').trigger('scroll'); 
  </code></pre>
  
  <p>Then this one is added in document ready function. </p>
  
  <pre><code>$(document).ready(function(){    
     $("img.lazy").lazyload({ 
        effect: "fadeIn"
     }).removeClass("lazy");
  })
  </code></pre>
  
  <p>Now the remaining problem is, the images in the other tab. The images don't load unless I scroll the page. I tried to trigger scroll when the tab is clicked but it didn't work. This is what I tried but both didn't work. </p>
  
  <pre><code> //Attempt one
   $( "#display" ).on( "tabsbeforeload", function( event, ui ) {
       $('.resulttab').trigger('scroll'); 
   })
   //Attempt two 
   function triggerscroll() {
        $('.resulttab').trigger('scroll'); 
   }
  </code></pre>