揮発性のメモ２

知識をメモ書きしておく

同一画像をどんどん再読み込みする

JavaScript

どんどん上書きされる画像ファイルをどんどん再読み込みするHTML

<script>
    function reloadimg(e,timer){ 
        setTimeout( function(){
            e.src = "hoge.jpg?r=" + Math.random(); 
        },timer); 
    }
</script>
<img src="hoge.jpg" onload="reloadimg(this,1000)" onerror="reloadimg(this,5000)" />

うまく読めたら1秒後に、なんか読めなかったら5秒後に画像を再読み込みする。



第1版
?の後ろに数字入れてどんどんリロードさせる方法
読めても読めなくてもリロードしていた

<script>
    g_count=0;
    function reloadimg(){
        g_count++;
        document.getElementById("unko").src="hoge.jpg?count=" + g_count;
        setTimeout("reloadimg()", 1000);
    }
</script>
</head>
<body onload="reloadimg()">
<img id="unko" src="hoge.jpg" />


第2版
3G回線だと読みきる前に切り替わったりしたので、画像がちゃんと読めてからリロードするように変更

<script>
    var g_count=0;
    function reloadimg(){
        var s = document.getElementById("unko");
        s.src = "hoge.jpg&count=" + g_count;
        s.onload = function(){ setTimeout("reloadimg()", 1000); }
        ++g_count;
    }
</script>
<img id="unko" src="hoge.jpg" onload="reloadimg()" />


第3版
クロージャを使って変数を閉じ込めてみた

<script>
    var reloadimg = (function(){
        var m_count=0;
        return function(){
            var s = document.getElementById("unko");
            s.src = "hoge.jpg?count=" + m_count;
            s.onload = function(){ setTimeout("reloadimg()", 1000); }
            ++m_count;
        }
    })();
</script>
<img id="unko" src="hoge.jpg" onload="reloadimg()" />


第4版
毎回onload設定しなくても良かったので削った
idじゃなくてnameならdocument.unkoできると知った

<script>
    var reloadimg = (function(){
        var m_count=0;
        return function(){
            document.unko.src = "hoge.jpg?count=" + m_count;
            ++m_count;
        }
    })();
</script>
<img name="unko" src="hoge.jpg" onload="setTimeout('reloadimg()', 1000)" />


第5版
?の後ろは乱数で十分なのでクロージャを使う理由がなくなった
エラー時の動作も設定したくなった

<script>
    function reloadimg(){
        unko.src = "hoge.jpg?r=" + Math.random(); 
    }
    function setreload(timer){ 
        setTimeout('reloadimg()',timer); 
    }
</script>
<img name="unko" src="hoge.jpg" onload="setreload(1000)" onerror="setreload(5000)" />


第6版
関数定義をいっこ減らした
あとthisを渡すことで名前も不要にした