javascript - 使用 jquery/ajax 自动刷新特定 div 并加载图像

Question

我有一个网络广播电台，我需要一个脚本来显示带有 id 的特定 dvi 中当前歌曲的图片。每次歌曲更改时，图像都会通过 ftp 自动上传到服务器。

HTML:

<div id="auto"></div>

JS:

  $ (document).ready(function() {
    $('#auto').html('<img src="artwork.png"></img>');
    refresh();
  });

  function refresh() {
    setTimeout (function() {
      $('#auto').html('<img src="artwork.png"></img>');
      refresh();
    }, 1000);
  }

我尝试了这个，但我得到的只是图像已加载，但如果发生更改，我必须再次手动刷新整个页面..

Answer 1

我会在这里指出很多事情。

如果您要使用 setTimeout 递归调用而不是使用 setInterval 操作来重复它，我认为您的代码就很好。

文件缓存

您的问题可能是浏览器的缓存，因为您始终使用相同的图像名称和目录。浏览器比较文件名和目录，并决定从缓存中加载它，否则它将向服务器请求它。在这种特殊情况下，您可以采取不同的技巧从服务器重新加载图像。

1. 对动态加载的歌曲使用不同的文件名/目录

2. 使用随机 GET 查询(例如 image.png?v=current timestamp)

您的切换方法

您正在使用 FTP 替换该文件，我不建议这样做。也许您应该将所有相册和缩略图上传到服务器，并使用不同的动态切换来提高效率和减少出错率，并将帮助您更好地实现上一节中的方法#1。

不断刷新加载

我想强调的是，如果您使用的是基于事件的 NodeJ 或 nginx 服务器，您可以用更少的流量实现相同的功能。您不需要刷新方法，因为这些服务器实际上可以将特定事件的数据发送到浏览器，告诉它当时加载特定资源。为此不需要不断刷新。

你考虑你的选择，我尽力做到全面