質問
Vue CLIでWebアプリを開発しており,Vuetifyのv-img
を使ってv-data-table
内に大量の画像を表示するページを作成しています.(画像はassets
フォルダに入れてビルドしています)
画像は適切に表示されるのですが,ページを下にスクロールすると少しだけ画像の表示が遅れます.
Chromeの検証タブよりネットワークを監視すると,スクロールして画像が表示されるたびにダウンロードしているようでした.
そこで質問ですが,ページ内の画像をページロード時にすべて読み込んでスムーズに表示させることはできないでしょうか.
もちろん初期読込みが遅くなる恐れもありますが,その点については問題ありません.
調べたこと
スクロールしてから読み込まれる方法をLazy Loadと言うのでしょうか?
調べてみると,「Lazy Loadにする方法」はたくさんヒットし,解除する方法はほとんどヒットしませんでした.
そのように読み込んでしまう原因はVuetifyのv-data-table
やv-img
によるものかもしれないと勝手に思って質問させていただきましたが,よく分かっていません......
よろしくお願いします.
補足・追記
似たようなものに以下のサイトを見つけました。
https://www.codeply.com/p/d5XibmqjUh
このサイトでは、v-data-table
内のプルダウンを展開すると画像が表示されていますが、試してみると分かる通り、展開後に画像が表示されるまでに若干の時間がかかっています。これが私が解消したい問題で、ページの読込と同時にすべての画像を読み込むにはどうすればよいでしょうか。ページの解説は、逆に展開と同時に読み込むためには?のようですが...
ちなみに、私の環境ではrequire('@/assets/画像パス.png')
で画像を読み込んでいます。この読み込み方法自体が、Lazy Loadになってしまうのでしょうか。解決できるならば、require
以外の方法で画像を読み込む方法もご教授願いたいです。
長くなりましたが、よろしくお願いします。

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。