如何动态更改的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 。