お問い合わせ

遂に来る！ Chrome 75にてLazyLoadが正式に実装されるようです🎉

リードUI開発者 宇賀

皆さんこんにちは！春から肩書の頭に「リード」が付きましたリードUI開発者の宇賀です！
今後ともどうぞよろしくお願いいたします。

さて、つい先日の話ですがそれよりももっと素晴らしいニュースが飛び込んできました！！😲 なんと、CanaryではないGoogle Chrome 75にて、LazyLoad（遅延読み込み）が正式に実装されるとのこと...！🎉🎉🎉

ページの初期ロードでは見えている必要がない画像の読み込みを遅延させることで、ユーザー体験の質を向上させることができることから、今までもずっと注目されてきた技術です。

これまでの議論や試験的に実装ではlazyloadという名前が使われておりましたが、loadingという名前で実装されることになったようです。対応する要素がimg要素とiframe要素である点はこれまでと変わりありませんね。

loading属性は次の3つのうち、いずれかを値に指定できる列挙型の属性です。

  • lazy - 読み込みを遅延させる
  • eager - ページロードに伴いすぐにロードを始める
  • auto - ブラウザが遅延読み込みさせるかどうかを判断する

値が設定されていない場合のデフォルト値はautoになります。

loading属性で遅延読み込みを有効にすれば、JavaScriptによるサポート無しで、画像が見える領域の近くまでユーザーがスクロールをすると、画像が見える前にブラウザは読み込みを開始するような実装ができるようになるわけですね。

JavaScript周りとの関わり

どうやらloading属性はIDL属性として実装されるようですから、ブラウザがこの属性をサポートしているかどうかは'loading' in window.HTMLImageElement.prototypeで判断できますね。

<img src="example.webp" alt="dummy" id="hoge" loading="lazy">
<iframe src="example.html" loading="lazy"></iframe>

<script>
const img = document.getElementById('hoge');

console.log(img.loading); // > lazy
</script>

ページのマークアップやリソースが読み終わった後はloadイベントが発火しますが、遅延読み込みの画像がドキュメントの中に含まれており、読み込みが始まっていなくともそれ以外の読み込みが完了した時点でloadイベントは発火するようです。

img要素やiframe要素自体のloadイベントは、それらが完全に読み込まれた時点でそれぞれ発火するそうです。読み込みを遅延させている複数の要素が近い場合、読み込みの開始と完了順序は非同期なため、loadイベントの発火順序も保証されないとのこと。

Canary版Chromeで試験的な機能として実装されたBlink LazyImagesに含まれている「JavaScriptで作られたものは対象外」などの仕様はそのまま生きているのでしょうか。気になりますね。

最後に

もう10年以上も前から遅延読み込みについては議論がされてきました。YUI ImageLoaderやjQuery Lazy Loadから始まり、様々なライブラリを経てついにブラウザへネイティブ実装されるというのは何とも感慨深いですね。Chrome Platform Statusによると、まだFirefoxとEdgeには動きがないようですが今後どうなっていくのか楽しみです。

  • Firefox: No public signals
  • Edge: No public signals
  • Safari: Public support
  • Web Developers: Positive
Lazily load below-the-fold iframes and images - Chrome Platform Status

そういえば前回の記事もWebの未来についてのお話でした。Chrome 75がリリースされるのはすでに令和の時代に突入していることと思いますが、Web Developerの視点から見る令和の時代は一体どんな世界になっているのでしょうか。今からワクワクが止まりませんね...！😊✨

今回も記事が面白かった！と思っていただけましたら、ページ下部にありますシェアボタンでTwitterやFacebookにシェアしていただけるとうれしいです📢😉
次回もお楽しみに！🙆

参考文献

2019年の記事一覧に戻る