保留旧图像，直到新图像准备好更新答案

【问题标题】：Holding old image until new image is ready to update保留旧图像，直到新图像准备好更新
【发布时间】：2020-11-04 00:08:01
【问题描述】：

我正在使用 setInterval 和 jQuery 加载函数来定期更新图像标签。

var refresh_days = setInterval(function() { 
  $('#box_name').load("dynamic.php");}, 1000 );

这可行，但在新图像完全加载之前会有一点延迟，在此期间没有显示任何内容。

有没有一种方法可以等到新图像完全加载，然后显示它，以便从用户的角度来看图像会立即发生变化？

我的目标浏览器是 Chrome，我不需要它来兼容 IE。

谢谢，

【问题讨论】：

【解决方案1】：

您可以将图像加载到不可见的<img> 标记中，并使用“加载”事件来更新可见的。

$('#hiddenImage').attr('src', newImageUrl).load(function() {
  $('#realImage').attr('src', newImageUrl);
});

这样你就知道它在缓存中，所以可见图像的更新应该很快。

如果您要重新加载一整块内容，那么您将遇到问题，因为“加载”操作将更新页面，然后浏览器将启动 HTTP 事务以满足<img> 标记中的隐式“GET”请求。因此，您可以做的是：

【讨论】：

【解决方案2】：

尝试改用get() 方法...

$.get("dynamic.php", function(result){
    $("#box_name").replace(result);
});

【讨论】：

【解决方案3】：

我认为.load 可能会给您带来问题，因为您实际上是在 HTML 代码的该部分重新加载整个 HTML 结构。

我不使用.load，而是尝试使用jQuery.ajax() 方法。将一个方法附加到success 选项，该选项采用返回的图像并将其交换到旧图像上。这样，您只需使用 CSS 替换图像，而不是操作 DOM。

【讨论】：

即使他使用 jQuery.ajax，HTML 片段中会返回一个<img> 标记，该标记将导致 另一个 HTTP 请求。（这是假设他没有尝试像“数据 URL”这样的花哨的东西，这在 IE 中使用 Ajax 可能会很棘手。）
我实际上在想他只会返回一个指向 Web 根目录中图像文件的 URL 路径，并直接用 Javascript 替换图像源。您仍然在这里从技术上操作 DOM，并且您仍然希望预先缓存图像，但是一旦加载它就可以快速替换 img src。