画像を含むページ内遷移がズレるんでなんとかしたい

画像を含むページ内遷移をしたいとと思ったら、やっぱり基本は <a href="#hoge"> と <div id="hoge"> とかだと思うんですよ。それか <a name="hoge"> でもいいです。

で、遷移先までの途中に画像が差し込まれていると、ハッシュ付きURLで開いた時、
画像の読み込みによって遷移先がズレることがありませんか？

基本

• 画像はサイズ指定するべき←サイズが指定されていればこの問題は起きないはず
• 画像のサイズが読み込まれてからでないと決定しないときズレがち
• アニメーションでサイズが可変になることでも生じる

対応策

.js

function tryToScroll(img){
  leftImages--;
  if(leftImages === 0) scrollTo(img)
}

function scrollTo(el){
   el.scrollIntoView()
}

const imgs = document.querySelectorAll("img") //対象のタグは任意に変えること
let leftImages = imgs.length
imgs.forEach(img, () => {
  img.addEvemtListener("load", tryToScroll(img));
  img.addEvemtListener("error", tryToScroll(img));
})

多分これでうまくいくはず？
（空でタイプしたのでちょっと確認してないです。うまくいかなかったらコメントください）

アイデアとしては最初にimgタグの個数を数えて、読み込みおわりもしくはエラーならデクリメントし、
残っている画像の数が0個になったら再度スクロールを試みるというものです。

これで多分うまくいくんじゃないでしょうか

アニメーションするときの備え

cssアニメーションなどで画像を可変サイズにしたいとかもありますよね！
そういう時にもこの問題にぶちあたります。

まず確認するのは、アニメーション秒数が固定秒かどうかです。
たとえば0.2秒固定なら、0.2秒遅延して scrollTo() を試みましょう

.js

function tryToScroll(img){
  setTimeout(() => {
    leftImages--;
    if(leftImages === 0) scrollTo(img)
  }, 200)
}

こんな感じでうまくいくんじゃないでしょうか。
試してみてください。

SPAとかありがち

APIリクエストの結果で画像の数とか変わるので、よしなに頑張りましょう(๑•̀ㅂ•́)و✧