Question

我正在尝试不断更改循环中src标记的<img />。

我已经尝试过了，但它不会起作用：

<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。

如果你真的想尽快加载图像，你可以使用加载事件，即在最后一个图像完成后加载下一个图像，例如：

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

虽然，结果看起来很混乱。

P.S。 - 我从评论中看到你真正要做的就是展示视频。将静态图像转换为视频并使用<video>标记真的很有意义，但如果你真的决心这样做，你需要一个更一致的帧率，这样你可能想要使用setInterval具有适当的时间间隔，或requestAnimationFrame。

如何动态更改<img/>的src

3 个答案: