chrome / safari中的jquery砌体中断（堆叠图像）但仅在第一次加载时答案

【问题标题】：jquery masonry breaks(stacks images) in chrome/safari but only on first loadchrome / safari中的jquery砌体中断（堆叠图像）但仅在第一次加载时
【发布时间】：2011-09-19 20:06:29
【问题描述】：

似乎当我尝试加载页面时，所有图像都堆叠在一起。但是，如果您要单击将您带到同一页面的链接（例如主页链接），那么砌体就会启动。所以我认为砌体加载得太早了，就像在 jquery 准备好页面之前一样。

这是我的 jquery 调用：

$(document).ready(function(){
    $('#image_roll_container').masonry({
        itemSelector: '.box'
    });

....

这里是有问题的页面：

http://ratattoos.com/

它在 Firefox 和 IE8 中运行良好。

【问题讨论】：

请添加截图 -- 您的链接已损坏。

标签： jquery jquery-masonry

【解决方案1】：

我已经通过以下调整解决了这个问题：

<script type="text/javascript">
    $(document).ready(function(){
        $('img').load(function(){
            $(".content_photo").masonry();
        });
        $(".content_photo").masonry();
    });
</script>

【讨论】：

【解决方案2】：

看来我需要一个名为 imagesLoaded 的插件才能让 Monsry 脚本与 chrome 和 safari 等工具正常工作

【讨论】：

怎么用？还是用 Masonry 初始化它？
$('#masonry').imagesLoaded( function() { // 图像已加载，您可以初始化砌体 });

【解决方案3】：

尝试了这个帖子中的所有建议，没有任何效果，然后找到了这个：

$(window).load(function(){   $('#content').masonry(); });

现在工作正常，在这里找到它： https://github.com/desandro/masonry/issues/35

原帖作者： https://github.com/desandro

【讨论】：

【解决方案4】：

您对 imagesLoaded 的看法是正确的。它在 Firefox 中运行良好，但在 Chrome/Safari 中运行良好。

这里是链接https://masonry.desandro.com/layout.html#imagesloaded

代码：

var $container = $('#container');

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.box'
  });
});

【讨论】：

【解决方案5】：

我最近遇到了这个问题。为了解决这个问题，我使用了 img 的宽度和高度属性。问题自行解决。

【讨论】：

【解决方案6】：

如果您知道图像高度，另一种方法是在加载 Masonry 之前在 CSS 中分配它们，那么布局比等待图像更快。例如，如果您的所有图像大小相同，则此方法有效。然后，您的网站仍会在慢速连接（例如移动设备）上快速加载。

我在这里发布了一些替代方法的脚本：
http://instancia.net/loading-jquery-masonry-on-mobile/

如果您使用此脚本，请编辑数字以匹配您的。

【讨论】：

【解决方案7】：

在 Firefox 和我的 iPad 2 上，砌体工作正常，但在 OS X 上的 chrome 和 safari 中，元素在页面加载时重叠/堆叠，直到窗口调整大小甚至发生。在挖掘 jquery.masonry.js 的代码后，我发现我可以在创建砌体后立即触发 resize() ，以便所有元素正确重新排列。现在一切正常。

jQuery(document).ready(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
    itemsSelector: '.thumbnail',
    isFitWidth: true
    }).resize();
}); 
})

所有其他解决方案：(window).load、在 CSS 和 img 属性中设置宽度和高度等，都对我不起作用。

【讨论】：

【解决方案8】：

它需要这些浏览器中的高度才能像 Jennifer 所说的那样正确显示。我使用 php 的 getimagesize() 函数来获取图像的高度和宽度。现在完美运行。

【讨论】：

【解决方案9】：

<script>
        var container = document.querySelector('#masonry');
        var msnry = new Masonry( container, {
            itemSelector: '.item',
            "columnWidth": 200,
        });
        $('.item img').load(function(){
                var msnry = new Masonry( container, {
                itemSelector: '.item',
                "columnWidth": 200,
            });
        })
</script>

【讨论】：

请只使用英文。

【解决方案10】：

如果使用 $('img').load(function() F5(refesh) => 错误

新方法：

$(window).on('load resize', function() {
  if ($('.masonry-wrap').length) {
    $('.masonry-wrap')
    .css('max-width', $(window).width());
  }
});
$(window).on('load', function() {
  if ($('.masonry-wrap').length) {
    setTimeout(function() {
      $('.masonry').masonry({
        columnWidth: 0,
        itemSelector: '.grid-item'
      });
    }, 1);
  }
});

<div class="masonry-wrap">
  <div class="masonry">
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
    ....
  </div>
</div>

【讨论】：

【解决方案11】：

“加载”事件将针对 DOM 中的每个图像触发，这太过分了。当 DOM 中的最后一个图像加载时，您需要更新砌体的布局。代码如下：

$(document).ready(function(){
    // init the masonry on document ready event;
    // at this point the images are not loaded so the layout will break UNLESS you set up the correct values for the "width" and "height" attributes of the img tags
    $('.content_photo').masonry();

    // to make sure the layout will not break apart we update the masonry layout just after the last image from the DOM was loaded
    var total_images = $('img').length;
    var counter = 1;
    $('img').load(function() {
        if(counter == total_images) {
            alert('the last image in the DOM was loaded. now we can update the masonry layout');
            $('.content_photo').masonry('layout');
        }
        counter++;
    });
});

【讨论】：

【解决方案12】：

如前所述，我遇到了相反的问题：第一次加载在 Mac OS X Safari 中运行良好，但使用所有新项目更改网格导致它们全部堆叠在左上角。此外，等待就绪事件并在我们的元素上设置 CSS 高度和宽度并没有解决问题。

在我们的网站上，我们有显示在砌体网格中的数据类别，并且一次只显示一个类别。用户可以随时切换类别并触发 AJAX 请求以加载新数据。在最新的 Safari（9.1、10）和 Chrome 等浏览器中，我们可以在更改类别以换入所有新元素时简单地执行此操作：

    // domData is HTML string from the server
    // IMJS is our global variable that we use for globals and lookups
    $("#divTemplateCategoryName").after(domData); // insert new HTML
    var elementsToAdd = $(".grid-item-template-info"); //select the elements
    IMJS.MasonryGrid.masonry('addItems', elementsToAdd); // tell masonry to add them
    IMJS.MasonryGrid.masonry('layout'); // tell masonry to layout again

但是，在某些版本的 Safari 中无法使用，我们不得不这样做：

    // domData is HTML string from the server
    // IMJS is our global variable that we use for globals and lookups
    IMJS.MasonryGrid.masonry('destroy'); // destroy the grid
    $("#divTemplateCategoryName").after(domData); // insert new HTML
    InitMasonry(); // re-do our entire masonry init

因为我没有时间跟踪可能受此错误影响的每个浏览器版本，所以我为所有浏览器切换到后一种方法。

【讨论】：