2021年8月15日(日) 13時07分02秒 [Web関連]

縦長ページでlazyloadを使うとページ内リンクの移動先がズレる問題の解決方法

LazyLoadを使っているページで「ページ内リンク」の移動先がズレる問題を解消するには、画像の専有面積を事前に確定させれば良い

見出しの1行だけで言いたいことは全部言えてしまうのですけども。(^_^;)

最近のブラウザならどれにも搭載されている画像の遅延読み込み機能（＝画像の掲載場所付近までスクロールしない限り画像ファイルを読み込まないようにしてくれるブラウザ側の機能）は、無駄な通信量の削減に役立ちます。

初期はJavaScriptで実現するしかありませんでしたが、HTML5でloading属性が正式に追加されたので、今ではimg要素にloadiong="lazy"と追記しておくだけで簡単に使えます。（このように指定されたimg要素の画像は、閲覧者が実際にその表示位置までスクロールしない限り読み込まれません。）

とてもお手軽な方法なので、最近ではimg要素を書く際には（どれがどこに掲載されるものでも）問答無用でloadiong="lazy"を加えています。

ただ、この属性を加える際（というか遅延読み込みを使う際）には注意しないと、ページ内リンクの移動距離が正しくなくなって、ページ内リンクがうまく機能しなくなることがあります。具体的には、ページ内リンクの移動先座標よりも手前までしか移動できなくなってしまう現象が起きることがあります。

※画像素材の提供元: ウェブサイトのイラスト（＠いらすとや）

図の左側は、ページ内の画像が全部読み込めている状態の例です。右側は、LazyLoadによって「1画面目」を超える位置にある画像は読み込めていない場合（で、画像の縦横比が分からないために画像の占有空間を確保できていない状態）です。

このとき、②の位置へ移動するページ内リンクを作っていたとします。図の右側のように、各画像の専有面積が確保できていなければ、②の位置はもっと上部の①の位置になります。その結果、各画像の専有面積が確保できていない状態でのリンク先（移動先）は①の位置になります。なので、①の位置までしか移動してくれなくなるわけです。

（通信速度が遅ければ、一旦は②の位置までスクロールしたように見えて、途中にある画像が次々に読み込まれていった結果として、目的の位置（②の位置）が下方向へどんどんずれていく様子が見えるかもしれません。）

img要素にwidth属性とheight属性がないと、画像の専有面積（特に縦横比）がソースからは分からないので、画像用空間の事前確保ができない

このような移動距離不足の問題が起きるのは、img要素にwidth属性やheight属性を書いていない場合です。

レスポンシブなデザインが当たり前になって以後は、（個人的には）img要素にwidth属性もheight属性も書かないことが多くありました。CSS側でサイズを指定するのでHTML側にサイズを書いても無駄だろうという考えからです。

しかし、width属性やheight属性を省略してしまうと、実際に画像が読み込まれるまで画像がどのようなサイズでページに描画されるべきなのか（ブラウザ側が）判断できない問題があります。

その結果、画像の専有面積をゼロだと仮定した移動量で計算されてしまうのか、「画像が読み込まれていない状況での移動先座標」と、「画像が読み込まれた後での移動先座標」にズレが出てしまって、ページ内リンクで（特に長距離を）移動する際には移動先の座標がズレてしまうのでした。

なので、width属性とheight属性は省略せずに書く

これを防ぐには、とりあえずwidthとheight属性をimg要素に書いておくことです。

とはいえ、実際に表示されるサイズである必要はありません。
画像の表示サイズは、CSSを使って「横幅を割合で指定＋高さは自動調節」というように書いている場合もよくありますよね。この場合、画像が実際に表示されるサイズをHTMLにお書いておくことはできません。実際に必要なのは「画像の縦横比」だけですから、縦横比が分かる値が書かれていれば問題ありません。

望ましいのは「CSSが読み込めなかった場合に表示させたいサイズ」を書いておくことだとは思いますけども。ただ、昨今、「CSSが読めなかったらどうしようもないページ」もそこそこありそうなので、まあ、原寸サイズを書いておくのでも良いかな、という気がしています。

このwidthとheightの両属性がHTMLにあれば（それによって縦横比が分かるので）、CSSと組み合わせることで画像の占有面積が特定できるため、遅延読み込みによって画像が読み込まれていなくてもページ内の物体の配置座標が確実に決まりますから、ページ内リンクがズレることもありません。

（HTML側でサイズの指定がなくても、CSS側でピクセル単位でサイズが指定されているなら問題はないのでしょうけども。）

もしかしたら業界では当たり前のことだったかも知れないのですけども、私はそこに気付くのに結構な時間が掛かってしまいました。┌(:3」└)┐

※なお、この「widthとheightがHTMLにあれば、CSSでwidth:100%とか書いていても縦横比から正しい専有面積を事前にブラウザが計算してくれるよ」という話は、Google developersの記事 Optimize Cumulative Layout Shift > Images without dimensions でも解説されていました。