WordPress5.5以降で、ページ内のジャンプが正常に動作しない!?

所沢でホームページ制作や欧州輸入品販売を行っているRishunTradingです。
JavaScriptで、ページ内のジャンプを実装(該当位置までスムースにスクロールする)していたのですが、ある時から変な位置にジャンプするようになりました。原因が不明だったのですが、調査したところWordpress5.5以降で実装された｢img｣タグに自動付与されるようになった「loading=”lazy”」が原因でした。気づいた時には、「ハー」と思わずため息をついてしまいました。
今回は、｢img｣タグに自動付与される｢loading=”lazy”｣のお話と、今回の事業が発生した原因、そして、Wordpressで｢loading=”lazy”｣を自動出力させない方法について記載しようかと思います。

｢img｣タグの属性｢loading=”lazy”｣とは

WordPress5.5以降、｢img｣タグに属性｢loading=”lazy”｣が自動付与されるようになりました。もちろん、自動付与された背景には、意味があります。

｢loading=”lazy”｣は、画面の表示を早くする仕組みの一つです。通常、ブラウザは、該当ページのHTMLに記載されている【全ての｢img｣タグの画像ファイル】をロードしにいきます。かなり長いページで、下の方までスクロールしないと、ユーザーが見ないような画像も含めて、とにかく全てロードしにいきます。

これは、当然の事ですが、ネットワーク的にも、サイトレスポンス的にも、良い事ではありません。ユーザーにとっては、ブラウザの画面領域(ビューポート)で視認している箇所の画像さえ表示されていれば良いので、このビューポートの外にある画像は、ロードせず、ビューポートに近づいた時に当該画像のロードを開始すれば、ネットワークに過度な負担をかけず、サイトレスポンスを改善する事ができます。

これを実現する一つの方法が、｢img｣タグの｢loading=”lazy”｣属性になります。

この遅延読み込みは、JavaScriptでも実装する事ができますが、｢img｣タグの｢loading=”lazy”｣属性さえ付与しておけば、実装でき、各メジャーなブラウザ(Chrome/FireFox/Edge/Safari)では、既に標準サポートされています。
※なお、loading=”lazy”は、iframeタグにも使用できます。

今回発生した事象とその原因

今回発生した事象の原因は、ページ内ジャンプを、該当位置まで単純に移動させるようなジャンプではなく、「jQuery」で「該当位置までスムースにスクロールさせる動き」を付けていました。

該当のJavaScriptのソース

該当のソースを見るとわかるのですが、
2行目で｢ヘッダー｣の高さを取得し、
10行目で該当箇所のオブジェクトを取得し、
12行目で｢該当箇所までの高さ｣から｢ヘッダーの高さ｣を引いて、｢ジャンプする位置｣を割り出しています。
(ヘッダーの高さを引いているのは、スクロールしても、常にヘッダーを表示しているため。)
そして、13行目でアニメーションで該当位置まで自動スクロールさせています。

【おまけ】
6行目のif文は、｢Advanced Custome Fields｣のプラグインを使うと、競合してしまうため、href=”#”の時には終了させるようにしています。(｢Advanced Custome Fields｣の設定画面で<a href=”#”>が使われるため。)

そのため、12行目の｢該当箇所までの高さ｣を割り出す際に、該当箇所までの間に、画像ファイルがあった場合には、通常は画像ファイルの高さも考慮されますが(全てロードされてから表示されるため)、<img>タグで｢loading=”lazy”｣が指定されていた場合には、ビューポートの外にある画像はロードされませんので、画像の高さが0になってしまいます。
そのため、該当箇所の高さを算出する際には、ビューポートの外にある画像の高さは0で考慮されず、しかし、実際に、アニメーションで該当位置まで自動スクロールしている際には、ビューポートに来ると画像が表示されますので、ジャンプ位置にずれが生じてしまっていました。

対処方法

そんなにたくさんの画像ファイルを読み込んでいない事や、Webp対応ブラウザに対しては、高圧縮画像形式Webpにも対応させていましたので、今回は、Wordpressで｢loading=”lazy”｣を自動出力させない設定をfunctions.phpへ埋め込みました。

これで対処する事ができました。

まとめ

本来であれば、サイトレスポンスを向上させるために、｢img｣タグの「loading=”lazy”」は使った方が良いとは思うのですが、今回はたくさん画像を使っていない事や、Webp対応ブラウザに対しては、Webp対応していましたので、このような対象方法とさせて頂きました。

ただ、画像がロードされなくても高さが取得できるように以下のように改修すれば、｢loading=”lazy”｣を｢img｣タグにいれたままでも、対応は可能です。

HTML

CSS

以上、皆さまのお役に立てれば幸いです。