0

私はプロジェクトに Masonry を使用しており、それに応じて imagesLoaded を適用しています。

何度も何度もテストした結果、これら 2 つはほぼ完全に連携して動作することがわかりましたが、失敗することもあります。99% の場合は imagesLoaded のせいです。

ただし、Internet Explorer では、imagesLoaded は他のどのブラウザーよりも多くの読み込みに失敗するようです。

これが私が見つけたものです：

  • 新しいタブを開いてURLを直接入力すると-> imagesLoadedが動作します
  • 更新を押すと-> imagesLoadedが機能します
  • URL を入力した場合は、[更新] をクリックし、アドレス バーのテキストをマークして Enter キーを押します -> imagesLoaded は失敗します
  • コンソールを開いた状態で上記のアクションを繰り返す場合 -> imagesLoaded が機能する
  • 気が向いたらうまくいかないこともあるし…。

ここでの取引は何ですか？これは、Internet Explorer (11、10、9 など) でのみ発生します。

JS は次のとおりです。

function masonryOptions(){
    $('.post-wrapper').width((((($('#content').width() - ((columnCount*gutter) - gutter)) / columnCount) / $('#content').width()) * 100)+'%');
    $(window).resize(function() {
        $('.post-wrapper').width((((($('#content').width() - ((columnCount*gutter) - gutter)) / columnCount) / $('#content').width()) * 100)+'%');
    });
    container.imagesLoaded(function(){
        $('iframe').load(function() {
            container.masonry({
                itemSelector: '.post-wrapper',
                gutter: gutter,
                transitionDuration: 0
            });
        });
    });
}
$(document).ready(function(){
    masonryOptions();
});

デモページ: http://lorem-blogsum.tumblr.com/

4

1 に答える 1

0

gutter と margin-bottom にも同様の問題があります。

何が問題なのか正確にはわかりませんが、私の場合、問題はパディングです。石積みで2列のアイテムを作ってみました。

.item {
   padding: 10px 10px 10px 10px;
   margin-bottom: 10px;
   width: 48%;
}

.gutter {
   width: 4%;
 }

 <div id="id_list">
     <div class="item">
         ...
     </div>
     <div class="item">
         ...
     </div>
 </div>

 $("#id_list").masonry({
     gutter: ".gutter",
     itemSelector: "div.item"
 });

IEではバグがありました。だから、私は自分のコードを変更しました。

.item {
    margin-bottom: 10px;
    width: 48%;
}

.gutter {
    width: 4%;
}

<div id="id_list">
    <div style="padding: 10px 10px 10px 10px">
        <div class="item">
            ...
         </div>
         <div class="item">
            ...
         </div>
    </div>
</div>

$("#id_list").masonry({
    gutter: ".gutter",
    itemSelector: "div.item"
});

そしてバグが消えた！お役に立てば幸いです。英語が下手で申し訳ありません。

于 2014-08-18T19:17:06.487 に答える