Question

只有在服务器中更改源图像时，是否可以在Javascript中更新"backgound-image: \"<some-url>\"中传入的URL指向的CSS图像。即缓存图像，然后在需要重新加载图像时从服务器检索图像并将其与缓存图像进行比较。然后，仅在更新时重新加载。我知道为了通过Javascript刷新CSS中的图像，图像必须在“？”后面有不同的字符串。在图像源中，一种方法是使用“？”后Date.getTime方法返回的当前时间。例如。（我从这里得到了这个方法tuning guide）：

$(".come-css-class").css("backgound-image", "url(" + "\"" + some_source + "?" + new Date().getTime() + "\"" + ")");

但是，当我需要在检测到图像已更改时更新background-image时，我想调用上述逻辑。那么有没有办法检测这些变化？

Answer 1

为每个图像指定一个唯一的ID，然后经常轮询服务器以查看是否有新ID，如果是，则更改基础图像。

Answer 2

您可以向服务器端添加API，返回图像内容的一些哈希值。因此，当您第一次放置图像时 - 在＆＃39;？＆＃39;之后为特定图像添加哈希值。

$(".come-css-class").css("backgound-image", "url(" + "\"" + some_source + "?" + imageHash + "\"" + ")");

比不时调用哈希API并替换background-image属性。当图像将在服务器上更新时 - 它将返回新的哈希值 - 因此css将重新加载图像。

Answer 3

要通过JavaScript自动更新图像（不依赖任何后端脚本），您需要定期轮询服务器以检查修改日期是否大于图像的缓存副本。如果是这种情况，则需要刷新页面。

这将类似于以下内容：

var previous = null;
var current = null;
var image_url = 'IMAGE URL';
setInterval(function() {
  var req = new XMLHttpRequest(); // Poll the server
  req.open("HEAD", image_url, false);
  req.send(null);
  if (req.status == 200) {
    current = req.getResponseHeader('Last-Modified'); // Get modification time
  }
  if (previous && current && previous !== current) { // If it's been modified
    location.reload(); // Refresh
  }
  previous = current; // Store the 'new' image information
  $(".come-css-class").css("background-image", "url(" + "\"" + image_url + "\""); // Update the image
}, 2000); // Repeat every two seconds

另请注意，您在问题中将其称为backgound-image。您需要确保将其称为background-image才能正常运行。

希望这有帮助！：）

Answer 4

与对@Nosyara的回复评论类似，我认为到目前为止我找到的更好的方法是使用HTTP标头ETag来检测源图像（或文件）是否已更改从上一个缓存的文件。我认为@ ObsidianAge的答案也可行（即使用Last-Modified标题），但由于某种原因，当源图像（或文件）发生变化时，它不会显示任何变化。我做了一个简单的本地Apache服务器和带有Javascript onInterval事件的简单网页到console.log文件是否已更改，但看起来并非如此。显然ETag是一种方法。这是维基百科页面解释它的目的（它还有其他用途）：https://en.wikipedia.org/wiki/HTTP_ETag。

仅当使用Javascript更改源图像时更新CSS背景图像

4 个答案: