にしし ふぁくとりー:西村文宏 個人サイト

No.3995 - 今日のひとことログ

更新

■LOG No.3995

にししふぁくとりーHOMEに掲載している「今日のひとこと」の過去ログ(掲載履歴)です。 RSS

No.3995 〔820文字〕 📗

画像の遅延読み込み(画像の掲載場所付近までスクロールしない限り画像ファイルを読み込まないようにしてくれるブラウザ側の機能で、HTML5で正式に追加された仕様)は通信量削減に役立つので、最近では問答無用でimg要素にloadiong="lazy"を加えている。ただ、この属性を加える際には注意しないと、ページ内リンクの移動距離が正しくなくなって、ページ内リンクがうまく機能しなくなることがある。その原因は、img要素にwidthやheight属性を書いていないことだ。昨今、レスポンシブなデザインが当たり前になったので、img要素にwidth属性もheight属性も書かないことが多かったのだが(CSSでサイズを指定するからHTMLにサイズを書いても無駄だろうということで)、widthやheight属性を省略してしまうと、実際に画像が読み込まれるまで専有面積が分からないので、ページ内リンクで長距離を移動する際には移動先の座標がズレてしまうのだ。これを防ぐには、とりあえずwidthとheight属性をimg要素に書いておくこと。実際に表示されるサイズである必要はなく、たぶん縦横比が分かれば良いのだと思うので、画像の原寸サイズでも指定しておけば良い。このwidth・heightの両属性がHTMLにあれば、CSSと組み合わせることで画像の表示面積が分かるので、遅延読み込みによって画像が読み込まれていなくてもページ内の座標が確実に決まるから、ページ内リンクがズレることもない。HTML側でサイズの指定がなくても、CSS側でピクセル単位でサイズが指定されていれば問題はないだろうが、レスポンシブWebデザインだとたいてい画像サイズは割合で指定されているから、画像の縦横比が(HTMLから)分からないと実際の表示面積が計算できない。もしかしたら業界では当たり前のことだったかも知れないのだが、私はそこに気付くのに結構な時間が掛かってしまった。
2021年4月
123
45678910
11121314151617
18192021222324
252627282930
2021年5月
1
2345678
9101112131415
16171819202122
23242526272829
3031
2021年6月
12345
6789101112
13141516171819
20212223242526
27282930

Powered by てがろぐ Ver 3.7.0

--- 当サイト内を検索 ---