0

我正在尝试在一个响应式网站上一起制作砌体和延迟加载，其中砌体的集团以 % 为单位。我已经阅读了关于这个主题的所有其他帖子，包括这个特定的帖子： 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 ......但我很害怕 ^^..）

非常感谢您帮助我，并为我糟糕的英语道歉。

4

1 回答 1

0

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

我发现这篇文章： CSS：响应式布局中的高度自动问题

现在我使用这段代码：

   //-----------------------------------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');

});

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

于 2014-06-14T01:17:44.313 回答