duancenxie2233 2014-10-27 15:23
浏览 93

Jquery LazyLoad没有处理ajax生成的图像并在选项卡中输出

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'); 
 }
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
    • ¥15 YoloV5 第三方库的版本对照问题
    • ¥15 请完成下列相关问题!
    • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?
    • ¥15 求daily translation(DT)偏差订正方法的代码
    • ¥15 js调用html页面需要隐藏某个按钮
    • ¥15 ads仿真结果在圆图上是怎么读数的
    • ¥20 Cotex M3的调试和程序执行方式是什么样的?
    • ¥20 java项目连接sqlserver时报ssl相关错误
    • ¥15 一道python难题3