javascript - 直播背景图不刷新

Question

我正在使用网络摄像头的实时流作为我个人网站的背景图片，但我遇到了一个问题，它每 2 秒自动刷新一次。

网站:daviddiliberto.com

供稿来源:

http://207.251.86.238/cctv290.jpg

我使用使用主题的 Squarespace，我的 CSS 需要覆盖主题，所以我在这里注入(inject)了它:

#main {
background-image: url("http://207.251.86.238/cctv290.jpg");
background-size: cover;
}

我的 JavaScript:

<script type="text/javascript">
    setTimeout(function() {
        document.getElementById("main").style.backgroundImage = "url("
            + "http://207.251.86.238/cctv290.jpg?"
            + new Date().getTime()
            + ")";
    }, 2000);
</script>

非常感谢任何帮助!谢谢!

Answer 1

您尝试做的是一个有趣的概念(尽管每两秒加载一张新图像在我看来有点繁重)

您的主要问题是当您应该使用setInterval(多次/无限次迭代)时您正在使用setTimeout(一次迭代)

我还建议将元素引用保存到一个变量中，这样就不必在每次迭代时都获取它。它看起来像下面这样

var main = document.getElementById("main");
setInterval(function() {
    // Fetch it again
    main.style.backgroundImage = "url(http://207.251.86.238/cctv290.jpg?"
    + new Date().getTime()
    + ")";
}, 2000);

Demo