更新图像而不闪烁 ASP.NET C#

Posted 2023-03-06

【中文标题】更新图像而不闪烁 ASP.NET C#

【英文标题】：Update image without flickering ASP.NET C#

【发布时间】：2011-10-02 16:10:45

【问题描述】：

我正在编写一个网站，该网站的页面必须显示图像。此图像是由 HttpHandler 使用查询字符串命令创建的，我怎样才能使其工作而不会出现任何闪烁？

提前致谢，如果您需要一些代码，我很乐意分享！

【问题讨论】：

“闪烁”是什么意思？是按 AJAX 更新图像并且应该平滑过渡到新图像还是重新加载整个页面？

是的，没错，有一个我想删除的过渡时刻，有一段时间图像是空的，然后它被新的图像填充。我将所有内容都放在了 UpdatePanel、图像和其他导致自动回发的控件中，但正如我之前所说的那样，没有平滑的过渡。

【参考方案1】：

您可以使用 2 个 UpdatePanel 并在每次“重新加载”后切换它们：

将 Frame1 加载到 Panel1 并在 Postback/Pageload 处隐藏 Panel2 通过 AJAX 将 Frame2 加载到 Panel2 中，并在加载图像后显示 Panel2 并隐藏 Panel1 通过 AJAX 将 Frame3 加载到 Panel1 中，并在加载图像后显示 Panel1 并隐藏 Panel2 aso....

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

【讨论】：

好的，我稍后再试。你能给我更多关于平滑时尚 js 代码的信息吗？

【参考方案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)

预加载图片后，过渡非常流畅。

附言我不记得我从哪里得到的，所以我不能给予信任。对不起。

【讨论】：

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