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の使い方
画像の遅延読み込みをしたいとき、何を使用しますか？ 私は「lazysizes」を発見してからというもの、ずっとこいつにお世話になっています。 個人的に、画像をimgタグで...
「Vue lazyload」などで検索してもVue専用のプラグインみたいなのがヒットしてばかりで、普通のLazyloadプラグインも動作するよーって情報がパッとでてこなかったので、メモに残しておきたいと思います。
もしかすると使い方によっては動かない場合もあるかもしれません。こういうケースでは動かない、などありましたら是非コメントください。
