ASP.NET C# 如何无闪烁地更新图片？

Question

我正在编写一个网站，其中有一个页面必须显示一张图片。这张图片是由HttpHandler使用查询字符串命令创建的，如何使其在没有任何闪烁的情况下工作？

谢谢您的帮助！如果需要代码，我很乐意分享！

- JasonMenny

---

“闪烁”是什么意思？图片是否通过 AJAX 进行更新，应该有平稳的过渡到新图片，还是整个页面重新加载？ - Christoph Fink

是的，确实有一个转换瞬间我想要删除，有一瞬间图像为空，然后它被新的图像填充。我把所有东西都放在了一个UpdatePanel中，包括图像和其他导致自动提交的控件，但正如我之前所说的那样，没有平稳的过渡。 - JasonMenny

Answer 1

你可以使用两个UpdatePanels，并在每次“重新加载”后切换它们：

将Frame1加载到Panel1中，在Postback/Pageload时隐藏Panel2
通过AJAX将Frame2加载到Panel2中，在图像加载完成后显示Panel2并隐藏Panel1
通过AJAX将Frame3加载到Panel1中，在图像加载完成后显示Panel1并隐藏Panel2
以此类推....

然后，您甚至可以使用JS（参见HERE）或更简单的jQuery fadeIn()和fadeOut()使Panel1->Panel2平滑淡入淡出。

- Christoph Fink

---

好的，我稍后会尝试。您能否请给我更多有关平滑淡入淡出JS代码的信息？ - JasonMenny

Answer 2

我在一个项目中使用了以下代码，当时我遇到了类似的问题。也许这可以帮助解决你的问题。

 (function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

在预加载图像之后，转换非常流畅。

附言：我不记得这是从哪里得到的，所以无法给出相关的引用。抱歉。

- Elad Lachmi

---

问题在于我的图像是由一个httphandler在我的页面上监听生成的，因此每当用户移动页面内的控件时，这个httphandler会生成一个新的图像来显示。我应该在新图像准备就绪的正确时刻拦截并在那里做一些事情以避免闪烁... - JasonMenny