javascript - 保留旧图像，直到新图像准备好更新

Question

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

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

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

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

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

谢谢

Answer 1

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

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

这样您就知道它在缓存中，因此可见图像的更新应该很快。

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

1. 将整个 blob 加载到隐藏的 <div> 中
2. 有一个 live() 处理程序等待隐藏 div 中图像标记的“load”事件；
3. 通过将 DOM 子树从隐藏的 div 移动到您真正想要的位置来响应“load”事件。