ユーザー登録で「300円クーポン」プレゼント!まずは無料登録から!
募集をシェアしてメンターを探そう
シェア
フロントエンド JS jQuary

jqyueryプラグイン「Masonry」を使用してつつ、画像を遅延読み込みさせたい。

8月19日
予算
5,000円 〜 8,000円
提案数
2人が提案中

・困っていること
jQuaryプラグイン「Masonry」を利用して画像をタイル表示させておりまして、その際に画像の遅延読み込みを行いたいですがjQuaryプラグイン「Masonry」と遅延読み込み系のプラグイン「lazyload」の相性が非常に悪く、実装できない状態です。

・実現したいこと
http://vita-inc.com/
上記webサイトのようにタイル表示させ、かつ画像の遅延読み込みを行いたい。

・前提条件
-表示される画像の枚数はCMS側で管理できるようになっており、画像の枚数に増減が発生する
-違うプラグインを使用しても大丈夫です!


・バグの内容
対象の画像lazyloadさせるとタイル表示が崩れ重なり合ったり、画像と画像の間が空きすぎてしまう。

・やったこと
https://digipress.info/tech/pure-css-flexbox-masonry-sample/
https://sitest.jp/blog/?p=11921
上記記事のようにcss側でタイル表示を実装しようとしたのですが、前提条件でも書いた通り画像の枚数が増減するため全体の高さの指定をすることができず、スクロールで画像が追加されるたびに画像が繰り上がってしまい、1枚ずつもとあった場所からずれてしまいます。


・補足
http://vita-inc.com/
↑こちらのサイトでは「Masonry」ではなく「isotope」プラグインを使って正しく画像遅延も動いているようです。こちらを実現したいです。

ご知見のある方、是非ご協力お願いしいたします。
よろしくお願いします。

メンティーに提案してみましょう
募集をシェアしてメンターを探そう
シェア