web-dev-qa-db-ja.com

jquery組積造はchrome / safariで壊れます（画像をスタックします）が、最初のロード時のみ

ページを読み込もうとすると、すべての画像が積み重なっているようです。しかし、同じページに移動するリンク（ホームリンクなど）をクリックすると、石積みが開始されます。したがって、jqueryがページなどを準備する前のように、石積みの読み込みが早すぎると思います。

ここで私のjquery呼び出し：

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

....

問題のページは次のとおりです。

http://ratattoos.com/

firefoxとIE8では問題なく動作します。

jqueryjquery-masonry
14
rugbert

monsryスクリプトがchromeやsafariなどで正しく動作するためには、imagesLoadedというプラグインが必要だったようです。

11
rugbert

私は次の調整でこの問題を修正することができました：

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

このスレッドで提案されているすべてを試しましたが、何も機能しませんでしたが、次のことがわかりました。

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

今は問題なく動作します。ここで見つけました： https://github.com/desandro/masonry/issues/35

元の投稿者： https://github.com/desandro

8
yodalr

あなたはimagesLoadedについて正しいです。 Firefoxでは正常に機能していましたが、Chrome/Safariではスタックしていました。

ここにリンクがあります http://masonry.desandro.com/demos/images.html

コード：

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

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

私は最近この問題に遭遇しました。これを修正するために、imgのwidth属性とheight属性を利用しました。問題は自然に解決しました。

1
Chadimoglou

別の方法は、画像の高さがわかっている場合、石積みをロードする前にCSSでそれらを割り当てることです。その場合、レイアウトは画像を待つよりも高速です。この方法は、たとえば、すべての画像が同じサイズの場合に機能します。その後、モバイルなどの低速接続でもサイトはすぐに読み込まれます。

私はここに代替方法のスクリプトを少し投稿しました：
http://instancia.net/loading-jquery-masonry-on-mobile/

このスクリプトを使用する場合は、自分の番号に一致するように番号を編集してください。

0
Jennifer Michelle
<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>
0
Miguel Hernández Von Hartmann

ジェニファーが言ったように正しく表示するには、これらのブラウザに高さが必要です。 phpのgetimagesize（）関数を使用して、画像の高さと幅を取得します。今は完璧に動作します。

0
Zach Krasner

$（ '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>
0
viet nam

説明したように逆の問題が発生しました。最初のロードはMacOS X Safariで正常に機能しましたが、すべての新しいアイテムでグリッドを変更すると、すべてが左上隅にスタックしました。さらに、準備完了イベントを待機し、要素にCSSの高さと幅を設定しても修正されませんでした。

私たちのサイトには、石積みグリッドに表示されるデータのカテゴリがあり、一度に1つのカテゴリのみが表示されます。ユーザーはいつでもカテゴリを切り替えて、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

このバグの影響を受ける可能性のあるすべてのブラウザバージョンを追跡する時間がないため、すべてのブラウザで後者の方法に切り替えました。

0
Tyler Forsythe

「load」イベントは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++;
    });
});
0
PAdrian

Firefoxと私のiPad2では石積みは正常に機能していましたが、OS Xのchromeとsafariでは、ページの読み込み時とウィンドウのサイズ変更が発生するまで、要素がオーバーラップ/スタックしていました。コードを掘り下げた後of jquery.masonry.js石積みを作成した直後に、resize（）をトリガーして、すべての要素を適切に再配置できることがわかりました。これで、すべてが正常に機能しています。

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

他のすべての解決策:(ウィンドウ）.load、CSSおよびimg属性での幅と高さの設定などは私にはうまくいきませんでした。

0
hisa_py