【jQuery】[Masonry]の表示の不具合を解消するために[imagesLoaded]を併用する方法。2.0【jQuery】[Masonry]の表示の不具合を解消するために[imagesLoaded]を併用する方法。ONZEhttps://on-ze.com/archives/1579HomeBlog【jQuery】[Masonry]の表示の不具合を解消するために[imagesLoaded]を併用する方法。Masonry]を使う際、Webkit系のブラウザ(Safari、Chrome)によっては、読み込みの際にボックスが重なり、初動では意図したように表示されないケースがあります。巷のブログでは、その不具合を解決するために「<img>要素に[width][height]属性をそれぞれ記述しておけば大丈夫」という記事を見かけます。実際には、その方法では問題を解決しきれません。そこでお勧めするのは、同じjQueryプラグインの[imagesLoaded]を併用するワザです。[imagesLoaded]を使うと、画像を表示する際、先にデータを完全に読み込み、読み込みが完了した後に任意の処理を実行できるようになります。この特性を利用して、[Masonry]側の計算処理が完全に終了してからデータの表示を始めるようにすることで、ページ読み込み時にレイアウトが崩れる既知の問題を解決しよう、というのがこの方法の狙いです。ここでは、[Masonry]のほうは既にインストールされている前提で、追加で[imagesLoaded]を導入する方法を紹介します。ちなみに[Masonry]の使用に関しては以下の記事を参照ください。[Masonry]の導入方法とりあえず[imagesLoaded]をダウンロードします。ダウンロード:imagesLoaded[jQuery]本体と[Masonry]も合わせて<head>〜</head>内に読み込みますが、このときエラーがないように、念のために各jQueryの読み込み順も留意します。設定は一旦破棄して、以下のコードを記述。これが今回のテーマの肝になります。true});});});エラーのあったブラウザで表示を試してみると、見事に不具合が解消されているのを確認できるはずです。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comTwitterFacebookFeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】ウィンドウ内に要素が表示されたときに処理を行う[jquery.inview]プラグイン。【jQuery】クロスフェードで切り替わるシンプルな画像スライドショー。【jQuery】壮大な宇宙をウェブページの背景に描く[Starfield]の使い方。【jQuery】レスポンシブ対応のスライドショーには最新版の[Glide.js]がオススメです。【jQuery】フォームへの再入力時にペーストを禁止する方法。