替换图像时如何使用 AJAX 刷新 DIV？

Question

我有一个在线广播电台，我想为每首歌曲显示一张专辑图片。因为我能够通过 ftp 自动将当前播放歌曲 (artwork.png) 的图片上传到网络服务器，所以我做了在 html 页面上显示图像的脚本..

我的代码：

<div id="auto">
  <img id="artwork" src="artwork.png"></img>
</div>

function refresh() {
  setTimeout (function() {
    var timestamp = new Date().getTime();
    $('#auto').html('<img src="artwork.png?timestamp='+ timestamp +'"></img>');

    refresh();
  }, 1000);
}

$('#artwork').attr('src', 'artwork.png?timestamp=' + new Date().getTime());

除了自动刷新，一切都很好，所以我必须手动刷新页面才能加载新的替换图像。但我希望每当上传新图像时对 div 进行一次刷新，仅此而已。 refresh();的问题出在哪里

Answer 1

首先，方法 refresh() 没有在您的 sn-p 中的任何地方调用，因此您需要先调用它。

其次，最好使用setInterval 而不是setTimeout

没有必要在 setTimeout 中调用refresh() 方法，因为它会在每次调用它自己时重新附加 setTimeout 方法，虽然它不会伤害你的程序员但是如果你想每秒调用一个程序那你应该去setInterval

我还简化了您的代码。

function refresh() {
  setInterval(function() {
    var timestamp = new Date().getTime();
    var newImage = 'https://picsum.photos/200?timestamp=' + new Date().getTime();
    $('#artwork').attr('src', newImage);
  }, 2000);
}
refresh();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="auto">
  <img id="artwork" src="https://picsum.photos/200">
</div>

Answer 2

在现有代码中再添加一行代码

function refresh() {
  setTimeout (function() {
    var timestamp = new Date().getTime();
    $('#auto').html('<img src="artwork.png?timestamp='+ timestamp +'"></img>');
    refresh();
  }, 1000);
}
refresh(); // new added line
$('#artwork').attr('src', 'artwork.png?timestamp=' + new Date().getTime());

Answer 3

您的代码存在问题，您创建了 refresh()，当调用它时应该调用一个函数来每秒刷新一次图像，因此您应该使用 setInterval() 代替。另外，您从未调用过 refresh()。所以，它不起作用，试试这个：-

<script>
    function refresh() {
        setInterval(function() {
            var timestamp = new Date().getTime();
            $('#auto').html('<img src="artwork.png?timestamp='+ timestamp +'"></img>');
        }, 1000);
    }
    window.addEventListener('load', refresh);
</script>

因此，refresh() 被定义，并在页面加载时调用。 refresh() 然后执行 setInterval() ，它每秒执行一次匿名函数来更新图像。还有其他可能的优化，例如清除页面卸载间隔等，但这将完成工作。希望对你有帮助！！！