学習方法

メンター情報

料金

対応時間帯

返信スピード

学習方法

メンター情報

料金

対応時間帯

返信スピード

kenya

一生懸命勉強してます。
プロフィールをもっとみる

--

募集をシェアしてメンターを探そう
シェア

※ この募集は締め切られました。

フロントエンド JS jQuary

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

2021年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」プラグインを使って正しく画像遅延も動いているようです。こちらを実現したいです。

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

kenya

プロフィール

一生懸命勉強してます。

--

募集をシェアしてメンターを探そう
シェア