途中で終了。
.hl_b,.x2_b を使った画像補完(今日から仮命名)について,微妙な欠陥を発見し試行錯誤していた。
src 属性を元に後から srcset 属性を追加するのは,いくら DOMContentLoaded でも間に合わず,二重読み込みが発生する。
src 属性は省略しても事実上問題は無さそうだが,仕様上は必須とされているため,どうも気持ち悪い。つまり,何らかの画像を読み込ませることは避けられない。
単純な img 要素を noscript 要素で囲んでおき,スクリプトで解除するという方法を思いつき,理論的には一番美しい気がしたが,レンダリングで領当てが事前確保出来ないという致命的な欠点があり断念。スクリプト側では noscript 要素の内容をテキストとしてしか取得出来ないのもすっきりしない。
スクリプト依存はいまさら仕方ないとして,ダミー画像を用意することにしたが,埋め込み画像は保守性の観点から使いたくない。/img/nil.png あたりの名前を使うことにした。HTTP/2 も導入したことだし立求の負担は軽い。
目的とする画像は data-src 属性 に書いておくか,まだブラウザが解釈しやすい srcset 属性にするか少し悩んだ。2x だけを記述しておけば,場合によっては src 属性を無視してくれることも期待出来るが,記述がやや煩雑になる。遅延読み込みにも応用出来る data-src の方を使っておくことにした。