はじめに
Vue2はもうサポートも終わってて今後使う人も増えることはないと思いますが、古いシステムでVue2を使っている人もいると思います。
そんな人のためにすこしでも力になればと思ってます。
私は1つ目の仕様見たときに宇宙猫状態になりました。絶対わからないって…
原因
1. loading="lazy"の位置が間違っている
loading="lazy"はsrc属性の前に記述する必要があります。
<!-- ❌ 間違い -->
<img src="image.jpg" loading="lazy">
<!-- ✅ 正しい -->
<img loading="lazy" src="image.jpg">
この仕様については、Vue.jsのGitHubリポジトリのissueでも議論されています：
2. width, heightが設定されていない
widthとheight属性を設定しないと、画像のデフォルトサイズが0×0ピクセルになり、特に画像ギャラリーなどで予期しない読み込み動作を引き起こす可能性があります。また、レイアウトシフトを防ぐためにも、ブラウザが画像のスペースを事前に確保できるようにする必要があります。
<!-- ❌ 間違い -->
<img loading="lazy" src="image.jpg">
<!-- ✅ 正しい -->
<img loading="lazy" src="image.jpg" width="300" height="200">
<!-- ✅ インラインスタイルでも可能 -->
<img loading="lazy" src="image.jpg" style="height:200px; width:300px;">
参考: Web.dev - Browser-level image lazy loading for the web
解決方法
上記の設定を両方とも適用することで、lazyloadが正常に動作します：
<img loading="lazy" src="image.jpg" width="300" height="200" alt="説明">
注意点
上記の設定を行っても、JavaScriptなどでDOM操作を行うと効かない場合があります。
vue2ではvue-lazyloadというライブラリを使うことができるようなので、もしVue.jsのコンポーネントで画像を動的に読み込む場合は検討してみてはいいでしょうか。
※ 私はライブラリを追加で入れたくなかったため、未検証です。