template要素内のimg要素

大量の画像を一気に読み込ませないように写真や書棚のページではログ・ページを別に作っていたが、やはり統一したい。CSSなどで隠すとHTTPリクエストが発行されてしまうし、遅延読み込みはせめてネイティブ実装が揃わないと落ち着かない。実装とユーザー操作、転送量においてコストの低い方法を模索し、template要素内に書かれたimg要素ではHTTPリクエストが発行されないことがわかったので、これを利用した。

最初の36枚以外は、月ごとにセクション分けし、それをtemplate要素で括っておく。つまりHTMLファイルのサイズはかなり増える。あとはユーザーが明示的に押す読み込むためのボタンを置き、それを押すとmain要素へコピーするだけの数行のJavaScriptを読んでおく。

document.querySelector("button").addEventListener("click", event => {
  const others = document.querySelector("template");
  others.parentNode.appendChild(others.content);
  const button = event.target;
  button.hidden = true;
});

真面目に書けば、(オート・)ページングもどきにもできそうだ。数百くらいの画像ならそこまですることもなさそうなので、2段階に分けるくらいで十分だろう、ということにしている。

遅延読み込みのネイティブ実装は素晴らしいものだけど、Blinkの提案(と実装)のままだと、事実上ポリフィルが必須になってしまうような気がしてならない。もし、ポリフィルを導入しないと、実装がないブラウザーでは大量に画像が読み込まれる。また、実装がないブラウザーはCPUや回線速度などの点で低性能な環境で使われている可能性は低くないだろう。低性能な環境で負荷が高く、高性能な環境で負荷が低い、というミスマッチが起こってしまう。

このようなことを考えているが、このtemplate要素を使ったアプローチも、実装がない環境で負荷が高いものだった。template要素とその振る舞いは、Chrome 26とSafari 8、Firefox 22から仕様通りに動き、デスクトップでもEdge 13から動く。デスクトップのInternet Explorer 11でのみ負荷が高くなる、と考えられ、現状ではさほど気にする必要はないだろう。