2016-06-27 8 views
0

このスクリプトは、ページをリロードせずにWebページに含まれるイメージを更新しています。その部分は機能する。JavaScriptでgetElementsByNameを使用すると、要素の数は時系列ループで増加し続けます。どうして?

スクリプトはvar objの以前の値を保存しているようですが、数回のパスを経て時間が増えていくので、私は...png?4314331?5847301?8978123になります。

私のページに5枚の画像がある場合、最初の5秒が過ぎると、input.lengthは10になり、次の5秒はinput.lengthに15などが返されます。

私の質問はなぜですか?

<script> 
function updateImage() { 

    var input = new Array(); 
    input = document.getElementsByName('imageChart'); 

    for (var i=0; i < input.length; i++) 
    { 
    var obj = document.getElementsByName("imageChart").item(i); 

    alert(obj.src); // Just to check what it's doing 

    obj.src = obj.src + "?" + Math.random(); 

    setTimeout("updateImage()",5000); 
    } 
} 
</script> 


<body onload="updateImage()"> 
+0

これは、あなたのコードに行うことを正確に示しているからです。 'obj.src = obj.src +"? " + Math.random(); 'obj.src'の現在の値+疑問符と数値をobj.srcに代入します。現在の値は、前回割り当てた値のたびになります。 –

+0

それでは、すこし質問です。あなたが参照している行は、htmlがイメージのキャッシュされたバージョンを使用していないことを確認することです。だから、タイムアウト後、obj.srcを再びオリジナルに戻しますか? また、連続したパスでは、画像が5枚しかないと5,10,15,20,25などが見つかるのはなぜですか? –

+0

'obj.src'を新しい値に設定するだけです。ページが読み込まれたときに元のパスを保存しておく必要があります。しかし、基本的に 'obj.src = originalPath +"を実行しますか? " + Math.random() 'なぜ私はあなたが各パスでより多くの画像を見つけているのか分かりません。もっとコードがありますか? –

答えて

0

正しい方法であるかどうかわかりませんが、最終的にすべての問題を解決しました。

<script type="text/javascript"> 

function updateImage() { 

    var input = new Array(); 
    input = document.getElementsByName('imageChart'); 

    for (var i=0; i < input.length; i++) 
    { 
    var obj = document.getElementsByName("imageChart").item(i); 

    var str = obj.src; 

    var strSplit = str.split("?"); 

    obj.src = strSplit[0] + "?" + Math.random(); 
    } 

    setTimeout(function() {updateImage()},10000); 

} 
</script> 
関連する問題