株式会社オンズ 開発ブログ 【jQuery】[Masonry]の表示の不具合を解消するために[imagesLoaded]を併用する方法。 [jQuery Masonry]を使う際、Webkit系のブラウザ(Safari、Chrome)によっては、読み込みの際にボックスが重なり、初動では意図したように表示されないケースがあります。 巷のブログでは、その不具合を解決するために「<img>要素に[width][height]属性をそれぞれ記述しておけば大丈夫」という記事を見かけます。 しかし実際には、その方法では問題を解決しきれません。 そこでお勧めするのは、同じjQueryプラグインの[imagesLoaded]を併用するワザです。 [imagesLoaded]を使うと、画像を表示する際、先にデータを完全に読み込み、読み込みが完了した後に任意の処理を実行できるようになります。 この特性を利用し
![【jQuery】[Masonry]の表示の不具合を解消するために[imagesLoaded]を併用する方法。](https://cdn-ak-scissors.b.st-hatena.com/image/square/9c6a1f35c1553aa9fe14bfedee09858d09918826/height=288;version=1;width=512/https%3A%2F%2Fon-ze.com%2Fblog%2Fwordpress%2Fwp-content%2Fthemes%2Fonze-blog-2024%2Finc%2Fthumbnail%2F600x360x80-7b84661a47b94014ea21f9c1a78873a8-thumbnail.png)