3

I am using http://www.appelsiini.net/projects/lazyload 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. 

$("#container").one("click", function() {
  $("#container").load("images.html", function(response, status, xhr) {
     $("img.lazy").lazyload();
  });              
});

Source: http://www.appelsiini.net/projects/lazyload/enabled_ajax.html

$("img.lazy").lazyload({ 
    effect: "fadeIn" 
}).removeClass("lazy");
$(document).ajaxStop(function(){
   $("img.lazy").lazyload({ 
       effect: "fadeIn" 
   }).removeClass("lazy");
});

Source: Binding image lazy loading to new images inserted after ajax request

Thanks for the help!

Update

Part of the problem is found by setting the container. This code is added in ajax success function. 

                           $("img.lazy").lazyload({
                                threshold : 100,
                                effect : "fadeIn",
                                container: $(".resulttab, .resulttab2")
                            }); 
                            $('.resulttab, .resulttab2').trigger('scroll');

Then this one is added in document ready function. 

$(document).ready(function(){    
   $("img.lazy").lazyload({ 
      effect: "fadeIn"
   }).removeClass("lazy");
})

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. 

 //Attempt one
 $( "#display" ).on( "tabsbeforeload", function( event, ui ) {
     $('.resulttab').trigger('scroll'); 
 })
 //Attempt two 
 function triggerscroll() {
      $('.resulttab').trigger('scroll'); 
 }
4

0 回答 0