{進捗記録}{進捗}{src 属性}{<img>}{領当て}{希哲14年10月10日の開発}{画像補完}{nil.png}{遅延読み込み}{2x}(49)

{希哲14年10月10日17歩 K#F85E/5B28-AF96}

デライト用合い改良

途中で終了。

.hl_b.x2_b を使った画像補完(今日から仮命名)について,微妙な欠陥発見試行錯誤していた。

src 属性を元に後から srcset 属性を追加するのは,いくら DOMContentLoaded でも間に合わず,二重読み込みが発生する。

src 属性省略しても事実上問題は無さそうだが,仕様上必須とされているため,どうも気持ち悪い。つまり,何らかの画像を読み込ませることは避けられない。

単純な img 要素noscript 要素で囲んでおき,スクリプト解除するという方法を思いつき,理論的には一番美しい気がしたが,レンダリング領当てが事前確保出来ないという致命的欠点があり断念。スクリプト側では noscript 要素の内容をテキストとしてしか取得出来ないのもすっきりしない。

スクリプト依存はいまさら仕方ないとして,ダミー画像を用意することにしたが,埋め込み画像保守性の観点から使いたくない。/img/nil.png あたりの名前を使うことにした。HTTP/2 も導入したことだし立求負担は軽い。

目的とする画像data-src 属性 に書いておくか,まだブラウザ解釈しやすい srcset 属性にするか少し悩んだ。2x だけを記述しておけば,場合によっては src 属性を無視してくれることも期待出来るが,記述がやや煩雑になる。遅延読み込みにも応用出来る data-src の方を使っておくことにした。

{2x}

{}