サイトの写真の表示方法の変更

tech

15:24

サイトのCSS・JSのちょっとした変更。1ヶ月前ぐらいから写真まわりにちょいちょい変更をいれてる。

このサイトの画像 (img 要素) は以下のようになっている

これにより、max-width/max-height を超えない限り最大の大きさで、アスペクト比を保って表示することができる。しかし問題点がある。

img 要素にはロード先画像の width 及び height を属性値で指定してあるのだが、CSSで auto を指定しているため、実際に画像のサイズが得られるまで、レイアウトが確定しない。つまり画像ロードのタイミングで不定期にリフローが起こり、ページ全体の高さが変わる。

JS では実行タイミングがどうしても遅くなるので、できればCSSで対応したいが、うまい方法がない。

せっかくwidth/height 属性値でサイズを指定していて、アスペクト比がわかっていて、理論上は幅と高さを確定することができるはずなのに、これが現状ではできそうにない。

いい方法が思いつかなかったため、JSで動的に対処した。img 要素の width/height 属性をもとに canvas で画像を生成して、まずはこれを表示する。

これによって本来の画像を読みこむ前に、HTMLの情報だけでレイアウトを確定させることができるため、画像がロードされるたびにページの高さが変わるということはなくなる。

しかし JS でやっているため、高さが未確定の状態で1度レンダリングされてしまう。