画像を非同期で読み込む工夫

『蔵書リンクMAKER』で出力したリンク用のHTMLをブログに貼り付けて使用していると、Amazonの反応が遅いときなど、本の画像読込みのところで固まってしまい、ページの表示が中断したりする現象が結構発生します。

そのためか、Amazonのアソシエイト・セントラルで作成できるリンクなんかはiframeを使用して非同期で読込むようになっていますよね。

iframeを使おうとすると、別途ファイルとして用意する必要が有るので面倒。
画像だけをiframe表示という手もありますが、位置調整の手間や、どうやってリンクとするか（単純にリンク(A)要素の中にIFRAME要素を入れてもリンクにはならない）課題が残ります。

軽い透明GIFをiframeに重ねて表示させ、そちらにリンク設置とか考えましたが、やっぱり位置調整が微妙で。

思案の挙げ句、例によってJavaScriptで、非同期に読ませるように一工夫。
■サンプル

■通常の画像リンク

<a href="http://www.amazon.co.jp/gp/product/4575833797%3ftag=furyutei-22%26link_code=xm2%26camp=2025%26dev-t=1S9C327N3DZD43F0K102" target="_blank">
<img border="0" height="208" align="left" src="http://ec1.images-amazon.com/images/I/51c88Ijno9L.jpg" alt="つぶらら 2 (2) (アクションコミックス)" title="つぶらら 2 (2) (アクションコミックス)">
</a>

■サンプルコード

<a href="http://www.amazon.co.jp/gp/product/4575833797%3ftag=furyutei-22%26link_code=xm2%26camp=2025%26dev-t=1S9C327N3DZD43F0K102" target="_blank">
<img border="0" height="208" align="left" src="#" alt="つぶらら 2 (2) (アクションコミックス)" title="つぶらら 2 (2) (アクションコミックス)" style="display:none;">
<script type="text/javascript">
(function(src){
var imgObj=(function(obj){while(obj){if(obj.nodeName.toLowerCase()=="script")break;obj=obj.lastChild};while(obj){if(obj.nodeName.toLowerCase()=="img")break;obj=obj.previousSibling}return obj})(document);
if(imgObj)setTimeout(function(){imgObj.src=src;imgObj.style.display="block"},1);
})("http://ec1.images-amazon.com/images/I/51c88Ijno9L.jpg");
</script>
<noscript>
<img border="0" height="208" align="left" src="http://ec1.images-amazon.com/images/I/51c88Ijno9L.jpg" alt="つぶらら 2 (2) (アクションコミックス)" title="つぶらら 2 (2) (アクションコミックス)">
</noscript>
</a>

■参考
IT戦記 - [JavaScript] とてもシンプルに自分自身が属する script 要素を取得

script タグを張りつけた位置の回りを操作するということが簡単に出来そうである。

の手法を使わせていただきました。

SCRIPT要素の直前に置いたIMG要素を操作しています。
IMG要素にidを付けてgetElementById()してから操作すればよいという説もありますが、その場合、idの付け方(一意性の確保)が難しくなってくるので(同一ページに同じリンクを複数貼る場合等)。