jQueryからの乗り換えでVue.jsを使用する場合、Lazyload(画像遅延読み込み)はどうすればいいのか?

実際にコードを動かして調べてみたところ、jQuery不要の最強プラグイン「lazysizes」なら問題なく動作してくれました。

以下のCodePenで実際に動作を確認してみてください。(lazysizesの読み込みはCodePenの設定にてheadで読み込んでいます。)

See the Pen Vue.js実践編 - 画像の遅延読み込み by LOOS WEB STUDIO (@loos) on CodePen.

この通り、Vueのリストレンダリングなどで出力した画像でも無事に遅延読み込みが発動しています。

Vue.jsでがっつりアプリケーションを作るケースではなく、単にjQueryの代わりにVue.jsを使いたいとか、WordPressでちょっと使うだけとかのケースなら、慣れ親しんだ使い方のできる「lazysizes」で良いかなと思います。

「lazysizes」の使い方は以下の記事で詳しく説明していますので、初見だという方は是非ご覧ください。

背景画像も遅延読み込み可能。万能Lazyloader、lazysizesの使い方背景画像も遅延読み込み可能。万能Lazyloader、lazysizesの使い方

「Vue lazyload」などで検索してもVue専用のプラグインみたいなのがヒットしてばかりで、普通のLazyloadプラグインも動作するよーって情報がパッとでてこなかったので、メモに残しておきたいと思います。

もしかすると使い方によっては動かない場合もあるかもしれません。こういうケースでは動かない、などありましたら是非コメントください。

目次
- Thank you for reading. -

あなたの1クリックが励みになります\( ̄ー ̄)/

コメント

コメントする

CAPTCHA


TOPへ Top