Question

我正在努力使工作砌成＆amp; lazyload together，在一个响应式网站上，砌体集团的百分比为％。我已阅读有关此主题的所有其他帖子，包括以下特定内容： Combining LazyLoad and Jquery Masonry

我已经应用了这篇文章的第一种方法，（除了我必须更改“重新加载”行，因为它在我的网站上进行了工作。不知道为什么。）第二种方法看起来也很棒;但它似乎对我很复杂。我不知道如何从服务器传达图像大小......

所以我得到了这个结果： http://test.cas-p.net/-Pipolass-

使用此代码：

$(document).ready(function(){
//-----------------------------------XX--SCRIPT masonry--XX 
    var $container = $('.masonry');
    container.imagesLoaded(function(){
         //first masonry call on placeholder images
        $container.masonry({
          transitionDuration: 0,
          itemSelector: 'article.bloc',
          columnWidth: 'article.w1'
        });
        //------XX-- lazyload --XX
            //load images who appears on the screen after masonry effect
        $('article.bloc img').addClass('not-loaded');
        $('img.not-loaded').lazyload({
              effect: 'fadeIn', 
              threshold : 900,
              load: function() {
                       // Disable trigger on this image
                       $(this).removeClass("not-loaded");
                      //reload masonry with real images size
                       $container.masonry({
                            transitionDuration: 0,
                            itemSelector: 'article.bloc',
                            columnWidth: 'article.w1'
                       });
              }
        });
        $('img.not-loaded').trigger('scroll');
     });
//-----------------
});

它看起来在firefox上工作正常。但是在chrome和safari上我遇到了一些麻烦：

在页面的末尾，我的容器与页脚重叠，有时，一个图像与另一个图像重叠。（更常见的是在页面的末尾）

值得一提的是，在两次徒步旅行中，所有图像重叠，直到向下滚动。（意味着第二次砌体调用，直到我向下滚动才能工作。）

任何人都有想法让它在safari和chrome上更好用吗？

（我现在不尝试IE ...但我很伤心^^ ..）

非常感谢帮助我，并为我可怜的英语道歉。

Answer 1

好的，我找到了解决方案的方法。问题来自我的响应式布局，他正在使用height：auto;

我发现这篇文章： CSS: height auto issue in responsive layout

现在我使用这段代码：

   //-----------------------------------XX--SCRIPT masonry--XX  

//Images still not loaded
$('article.bloc img').addClass('not-loaded');

function resizeBlankImages() {
        $('img.not-loaded').each(function () {
        var originalWidth = $(this).attr('width');
        var originalHeight = $(this).attr('height');
        var ratioH = originalWidth/originalHeight;
        var width = $(this).width();
        var height = width/ratioH;
        $(this).height(height);
    });
}

var $container = $('.masonry');
$container.imagesLoaded(function(){
    //change image height
    resizeBlankImages();
    //initialize masonry
    $container.masonry({
        transitionDuration: 0,
        itemSelector: 'article.bloc',
        columnWidth: 'article.w1'
    });
    //------XX-- lazyload --XX
    $('img.not-loaded').lazyload({
        effect: 'fadeIn', 
        threshold : 900,
        load: function() {
            $(this).removeClass("not-loaded");
                    //make image height auto again
        $(this).css('height', 'auto')
        }
    });
    $('img.not-loaded').trigger('scroll');

});

现在它在每个浏览器中都能正常工作： - ）

懒惰＆amp;砌体 - 差异firefox / webkit

1 个答案: