如何動態更改的src <img />

Question

我正在嘗試不斷更改循環中<img />標簽的src 。

我已經嘗試過了，但是行不通：

<img src="" />
<script>
    (function(){
        for(var i = 1; true; i++)
        {
            var str = "C:\abc\" + i + ".png";
            $("img").prop("src", str);
        }
    });
</script>

Answer 1

您需要使用.attr（）方法： https : //api.jquery.com/attr/

Answer 2

嘗試類似：

$('img').attr('src', str);

Answer 3

我相信圖像加載實際上是異步完成的，並且您有一個無限循環，該循環不斷重置img，啟動新的加載，即在一個加載完成之前，另一個加載已經開始。

我不確定您要實現的目標，但不是while循環，也許您應該嘗試使用setInterval ：

    setInterval(function() {
        var str = "foo" + i + ".png";
        i = i + 1;
        $("img").prop("src", str);
    }, 1000);

這將每秒更改一次圖片，直到您運行clearInterval為止。

如果您真的想盡快加載圖像，則可以使用load事件，即在完成最后一個圖像后立即加載下一個圖像，例如：

    $("img").prop("src", str).load(function () {
        i = i+1;
        var str = "foo" + i + ".png";
        $("img").prop("src", str);
    });

雖然，結果看起來很混亂。

PS-我從評論中看到，您真正想做的就是播放視頻。 將靜態圖像轉換為視頻並使用<video>標簽真正有意義，但是如果您真的確定要這樣做，則需要更一致的幀速率，因此您可能希望將setInterval與適當的時間間隔，或requestAnimationFrame 。