【jQuery】[Masonry]の表示の不具合を解消するために[imagesLoaded]を併用する方法。

Ads by Google

[jQuery Masonry]を使う際、Webkit系のブラウザ(Safari、Chrome)によっては、読み込みの際にボックスが重なり、初動では意図したように表示されないケースがあります。

巷のブログでは、その不具合を解決するために「<img>要素に[width][height]属性をそれぞれ記述しておけば大丈夫」という記事を見かけます。
しかし実際には、その方法では問題を解決しきれません。
そこでお勧めするのは、同じjQueryプラグインの[imagesLoaded]を併用するワザです。

[imagesLoaded]を使うと、画像を表示する際、先にデータを完全に読み込み、読み込みが完了した後に任意の処理を実行できるようになります。

この特性を利用して、[Masonry]側の計算処理が完全に終了してからデータの表示を始めるようにすることで、ページ読み込み時にレイアウトが崩れる既知の問題を解決しよう、というのがこの方法の狙いです。

ここでは、[Masonry]のほうは既にインストールされている前提で、追加で[imagesLoaded]を導入する方法を紹介します。

ちなみに[Masonry]の使用に関しては以下の記事を参照ください。

[Masonry]の導入方法

とりあえず[imagesLoaded]をダウンロードします。

ダウンロード:imagesLoaded

[jQuery]本体と[Masonry]も合わせて<head>〜</head>内に読み込みますが、このときエラーがないように、念のために各jQueryの読み込み順も留意します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="/js/jquery.masonry.min.js"></script>
<script src="/js/jquery.imagesloaded.min.js"></script>

これまでの Masonry の設定は一旦破棄して、以下のコードを記述。
これが今回のテーマの肝になります。


$(function(){
var $container = $('#masonry');
$container.imagesLoaded(function(){
	$container.masonry({
		itemSelector: '.item',
		isFitWidth: true,
		isAnimated: true
	});
});
});

エラーのあったブラウザで表示を試してみると、見事に不具合が解消されているのを確認できるはずです。

実装サンプル:http://on-ze.com/demo/jquery-masonry/

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です