サイトのCSS・JSのちょっとした変更。1ヶ月前ぐらいから写真まわりにちょいちょい変更をいれてる。
- 写真の高さを 100vh に制限するようにした
- ある程度以上のスクリーンサイズのときは16MPをロードするが、時間がかかるため、あらかじめ同等の大きさの灰色の画像を表示するようにした
- ロード中にロード中とわかるようにアニメーションをつけた (Spinner)
アスペクト比を維持した画像のリサイズがむずかしい
このサイトの画像 (img 要素) は以下のようになっている
- max-width max-height を指定
- width: auto; height: auto を指定
- 十分に大きなサイズの画像を指定
これにより、max-width/max-height を超えない限り最大の大きさで、アスペクト比を保って表示することができる。しかし問題点がある。
問題点：ロード時にレイアウトが確定しない
img 要素にはロード先画像の width 及び height を属性値で指定してあるのだが、CSSで auto を指定しているため、実際に画像のサイズが得られるまで、レイアウトが確定しない。つまり画像ロードのタイミングで不定期にリフローが起こり、ページ全体の高さが変わる。
JS では実行タイミングがどうしても遅くなるので、できればCSSで対応したいが、うまい方法がない。
せっかくwidth/height 属性値でサイズを指定していて、アスペクト比がわかっていて、理論上は幅と高さを確定することができるはずなのに、これが現状ではできそうにない。
現行の対策
いい方法が思いつかなかったため、JSで動的に対処した。img 要素の width/height 属性をもとに canvas で画像を生成して、まずはこれを表示する。
これによって本来の画像を読みこむ前に、HTMLの情報だけでレイアウトを確定させることができるため、画像がロードされるたびにページの高さが変わるということはなくなる。
しかし JS でやっているため、高さが未確定の状態で1度レンダリングされてしまう。
