揮発性のメモ2

http://d.hatena.ne.jp/iww/

読み込みエラーになった画像をもう一度読みなおすブックマークレット

javascript:(function(){
    var elist = document.getElementsByTagName("img");
    for( var i=0; i<elist.length; i++ ){
        var e = elist[i];
        if( e.naturalWidth==0 ){ 
            e.src += "#";
        }
    }
})();

firefoxで確認
状況を再現するのが面倒だったので、ほかで動くか試していない
自分の中では超便利


画像タグ img には completeプロパティとかreadyStateとかある。
readyStateプロパティは、IEにしかないが 画像の読込状況やエラー情報が取得できて便利らしい。
completeプロパティは、現在画像読込中かどうかを示す。読み込みが完了するとtrueになるが、エラーで終了してもtrueになる。(operaIEではfalseのままらしい)
そのため、画像が読めたかどうかの判定には使えない。


javascript - How to tell when an image is already in browser cache in IE9? - Stack Overflow
naturalWidthプロパティ、naturalHeightプロパティは 画像の本来のサイズを取得できるプロパティで、初期値は0。画像が読み込めたら値がセットされる。
というわけで、これを使えば 画像が読めてるかどうかわかる。


画像をリロードするにはsrcを更新すればいいが、とあるサイトでは 画像URLに余計な文字列を足すと404になるようになっていたため、?+タイムスタンプ という作戦は使えなかった。

そこで、もう場当たり的でいいので # をどんどん付け足す作戦にして成功した。