JQuery砌体：通过ajax追加图像

我有很多图像通过ajax加载。我使用砌体和惰性加载插件来显示图像。通过一个ajax调用导致问题和页面卡住所有图像，直到所有图像得到排列，所以我在第一个Ajax调用中加载了20个图像，并且在这个逐一的ajax请求在每个调用中获得10个图像并通过砌体追加追加后立即加载。JQuery砌体：通过ajax追加图像

function getMorePhotos() { 
    $.ajax({ 
      type : "POST", 
      url  : site_url+'controller/ajax_get_photos', 
      data : , 
      complete: function(response) 
        { 
         if (response.responseText != '0') 
         { 
          getMorePhotos(); 
         }      
        }, 
      success : function(response) 
       { 
        if (response == '0' || response == '') { 

        } else { 
         var temp = $(response).get(); 
         temp.forEach(function(element, index) { 
          $item = $(element); 
          $('#allPhoto1').find('ul.ins-view').append($item).masonry('appended', $item); 
          $item.find("img.lazy").lazyload({ 
           effect : "fadeIn", 
           threshold : 100 
          }); 

         }); 

        } 
       } 
     }); 
}

这是第一次请求完成后调用的方法。

现在的问题是：第一个图像连续闪烁，直到最后ajax请求完成。

我觉得这不是一个好的解决方案。任何人都可以提出建议吗？ enter image description here

我已经有<ul> <li>结构四柱。（见图片）

来源

2013-01-16 Jaya Vishwakarma

可以给我们演示的jsfiddle？ –

解决的issues.I失踪true这里

$('#allPhoto1').find('ul.ins-view').append($item).masonry('appended', $item, true);

设置从底部附加图像真实动画。

我做的另外一件事就是计算图像高度并在图像css中设置它，然后再添加，这样可以避免重叠。我会很快发布现场演示。

感谢砌筑宝贵的时间:)

来源

2013-01-17 05:45:17

谢谢你，我正在建造类似的东西 –

使用imagesLoaded（http://imagesloaded.desandro.com/）如果你在你的项目的图像。下面的代码为我工作

//Initiate maosnry 
$container = $('#container'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.item' 
    }); 
}); 

//and on ajax call append or prepend more items 
var $data = $(data).filter(".items"); 
$container.prepend($data).imagesLoaded(function(){ 
    $container.masonry('prepended', $data, true); 
});

来源

2014-04-23 11:26:02

JQuery砌体：通过ajax追加图像

回答

相关问题