結合LazyLoad和Jquery砌體

Question

我一直在拼湊砌體和moo工具lazyload，但是他們都不似乎一起走得很好，雖然它可能只是因爲我在編碼時稍微沒有用處！

磚石工程this page。

但是，當我試圖把它放在一起lazyload它似乎完全搞砸了。有沒有人有任何想法如何實現兩個插件在一起？

我花了6天試圖找出它，這是我最後的希望哈！

感謝

Answer 1

的原因是，砌體需要知道圖像的尺寸，以便正確地鋪陳項目。然而，LazyLoad會延遲加載圖像直到圖像在視口中，這意味着圖像將沒有尺寸（或者將您設置的img /佔位符圖像的尺寸設置爲img src）。

Answer 2

最近，我得爲我的一個網站解決這個問題。我嘗試了幾種方法，似乎有效。

1.第一種方法：在項目

• 負載磚石
• 放在所有圖像佔位符，並在其上使用lazyload現在
• ，當每個圖像型火災lazyload.load回調，重新加載砌體 - >一系列石工（'重新加載'） [更新jsfiddle新圖像，更容易說明一點]

http://jsfiddle.net/7vEJM/8/

var $container = $('#container'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.item', 
     columnWidth: function(containerWidth){ 
      return containerWidth/12; 
     } 
    }); 
    $('.item img').addClass('not-loaded'); 
    $('.item img.not-loaded').lazyload({ 
     effect: 'fadeIn', 
     load: function() { 
      // Disable trigger on this image 
      $(this).removeClass("not-loaded"); 
      $container.masonry('reload'); 
     } 
    }); 
    $('.item img.not-loaded').trigger('scroll'); 
}); 

這種方法很好，但它有一個缺點。網格佈局可能無法維持，因爲masonry.reload（）的時間取決於每個圖像的加載時間（即一個應該被首先加載可能只是後來完成）

2.第二種方法是相同的： 看看像pinterest這樣的網站，我認爲它不遵循第一種方法，因爲它們甚至在加載任何圖像之前都已經排列了容器盒，因此，我試圖實現的是僅顯示與圖像相同比例的盒子。步驟如下：

• 通過你的圖像尺寸（只返回像{image1: [300,400],image2: [400,500]}一個JSON）
• 使用CSS技巧，使格框根據容器調整 。我發現，招here
• 延遲加載正常人一樣，無需觸發任何重裝，因爲現在，沒有圖像， 的箱子是ALR排列正確

http://jsfiddle.net/nathando/s3KPn/4/

var $container = $('#container'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.item', 
     columnWidth: function(containerWidth){ 
      return containerWidth/12; 
     } 
    }); 
    $('.item img').lazyload({ 
     effect: 'fadeIn' 
    }); 
    $('.item img').trigger('scroll'); 
}); 

[編輯，以添加第二種方法的jsfiddle]

說明：

• 在這個小提琴中，我手動將每個圖像的高度/寬度比例放入'padding-bottom：xxx％'，它應該從服務器代碼中傳入（參考步驟1）
• 在邊框中添加使箱可見
• 爲了說明，這些箱子將安排未加載圖像，即使，嘗試取消註釋/*display: none */和#container.fluid .item img

乾杯

Answer 3

評論display: block我張貼在其他同樣的問題相同的答案文章。如果您的圖片重疊出現問題，我在下面的網站上找到了解決方案，儘管它是日文版。

http://www.webdesignleaves.com/wp/jquery/1340/

希望這會有所幫助。

重點是使用以下;

$('img.lazy').load(function(){ ... }) 

HTML

<div id="works_list"> 
<div class="work_item"> 
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/001.jpg" alt=""> 
<p>title 1</p> 
</div><!-- end of .work_item--> 
<div class="work_item"> 
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/002.jpg" alt=""> 
<p>title 2</p> 
</div><!-- end of .work_item--> 
.... 
</div><!-- end of #works_list -->  

jQuery的

$("img.lazy").lazyload({ 
    effect: 'fadeIn', 
    effectspeed: 1000, 
    threshold: 200 
}); 

$('img.lazy').load(function() { 
    masonry_update(); 
}); 

function masonry_update() {  
    var $works_list = $('#works_list'); 
    $works_list.imagesLoaded(function(){ 
     $works_list.masonry({ 
      itemSelector: '.work_item',　 
      isFitWidth: true,　 
      columnWidth: 160 
     }); 
    }); 
}  

Answer 4

可能有人會也有問題，希望幫助。

使它與wordpress photoswipe-masonry主題是可行的，沒有插件修改是不可能的。

下一個是有關本變形例，只是有磚石

一個）lazyload使用的數據原始=「XXX」屬性來設置圖像的URL。不是src。給你需要放置一些佔位符。可能是1x1像素，將在沒有延遲加載的情況下加載。

b）這個佔位符需要覆蓋所有空間供未來的lazyloaded圖像使用，或者masonry會使所有的圖像都顯示爲lazyloading視圖。這是因爲在加載圖像之前它的大小爲0px x 0px。並且所有圖像在加載前都適合可見區域。 Lazyload將全部計爲可見並加載全部。

安排你需要設置

風格=未來圖像中的所有空間 「寬：xxpx;高度：xxpx;」

只是寬度= 「XX」 和高度= 「xx」 是不夠

所以圖像佔位符作爲成爲：

<img src="http:..1x1px" data-original="http://real_image" style="width:xxpx;height:xxpx;"> 

然後應用延遲加載正常的方式，和砌築。以任何順序。

重要 - 砌築更新寬度，以它的列的大小，而不是高度，所以如果你的列大小= 50像素，那麼你需要計算佔位

的HEIGH

new_height = 50/actual_width * actual_height;

所以wordpress主題需要

$scaled_height =$options['thumbnail_width']/$full[1] * $full[2]; 

.....

    <img src="http://xxxx/1x1px.jpg" data-original='. $thumb[0] .' itemprop="thumbnail" alt="'.$image_description.'" style="width:'.$full[1].'px;height:'.$scaled_height.'px;" width="'.$full[1].'" height="'.$full[2].'"/> 

....

然後添加下面砌體初始化新線

 var reloading = false; 
        $.getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js',function(){ 



           \$('.msnry_item img').lazyload({ 
            effect: 'fadeIn', 
            //container: container, 
            threshold : 200, 
            skip_invisible : false, 
            failure_limit : 5, 
            load: function() { 
             if(! reloading) 
             { 
             reloading = true; 
             setTimeout(function(){ 
               container.masonry('reload'); 
               reloading = false; 
             }, 500); 

            } 
            } 
           }); 

        }); 

Answer 5

softk5答案不適合我並導致大部分瀏覽器凍結。這是我的以下代碼和它爲我工作。

jQuery(document).ready(function(){ 
    jQuery("img.lazy").lazyload({ 
     effect: 'fadeIn', 
     effectspeed: 1000, 
     threshold: 200, 
     load:function(){ 
      var $container = jQuery('.is_masonry'); 
      $container.masonry({ 
      }).imagesLoaded(function() { $container.masonry(); }); 

     } 
    }); 

});