/ / jQueryアイソトープ:IEがロードされていません-jquery、html、jquery-masonry、jquery-isotope

jQueryアイソトープ:IEがロードされていない - jquery、html、jquery-masonry、jquery-isotope

これは私が使用したことのないブラウザでよくある問題ですが、まだ使用しているようです。サイトに同位体グリッドを設定すると、すべてのブラウザーで正常に機能するように見えますが、IEでテストする場合は http://netrenderer.com divのレイアウトに失敗し、代わりにすべてブラウザの左側に固定されています。クロスブラウザフレンドリーなアイソトープ/石積みレイアウトなどを開始するjQueryメソッドを見つけようとしています(特にIE)。
jsfiddleの簡単なモックアップは次のとおりです。 http://jsfiddle.net/73Xv7/3/
ライブデモバージョンも: http://jsfiddle.net/73Xv7/3/show/
jQuery:

var jQuerycontainer = jQuery("#main-grid");

jQuerycontainer.imagesLoaded( function(){
jQuerycontainer.isotope({
itemSelector: ".grid-block",
animationEngine: "best-available",
masonry: {
columnWidth: 4
}
});
});

私が試した他の何かは、体をに設定することでした display: none そして、次のようにウィンドウのロードでフェードインを開始します。

(function($) {

$(window).load(function() {
$(document.body).fadeIn(1000);
});

setTimeout(function() {
$("#main-grid").isotope( "reLayout" );
}, 1000);

})(jQuery);

スクリプトをロードする時間を増やすことを目的として、これもすべてのブラウザーで機能します。 IEでも機能する石積みレイアウトを開始する方法はありますか?

回答:

回答№1は1

IE8とIE9でjsfiddleを試しましたが、機能しています。netrenderer.comエンジンに問題がある可能性があります。

レイアウトコールバック関数を使用してfadeInをトリガーすることを検討しましたか?

$("#container").isotope({
onLayout: function( $elems, instance ) {
// `this` refers to jQuery object of the container element
console.log( this.height() );
// callback provides jQuery object of laid-out item elements
$elems.css({ background: "blue" });
// instance is the Isotope instance
console.log( instance.$filteredAtoms.length );
}
});

見る: http://isotope.metafizzy.co/docs/options.html