asp .net背景图像在回发时闪烁

Posted

技术标签:

【中文标题】asp .net背景图像在回发时闪烁【英文标题】:asp .net background image flickering on postback 【发布时间】:2015-12-26 20:15:59 【问题描述】:

我的背景图片在每次回发时都会重新加载。所以每次按下按钮都会导致闪烁。它出现在 Internet Explorer(版本 11.0.9600.17843 测试)和 Chrome(版本 45.0.2454.93 m 测试)中。在 Firefox(版本 34.0.5 测试)中它可以工作。到目前为止,我还没有测试过其他浏览器。到目前为止,这是背景图像的代码:

<style type="text/css">
body 

   background-image:  url(/Img/Besuchermanagement_1920_1080.jpg);

    background-attachment: inherit;
    background-repeat: no-repeat;

    background-position: center;
    background-size: 100% 100%;
    min-height: 925px;

    opacity: 0.9
       
</style>

当我读到一个 IE 闪烁错误时,我还添加了这些元标记:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.2)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.2)" />

但这对我不起作用。

所以我添加了一个图像并通过这个 css 将其设置为不可见

.backgroundImageFix 

    width: 1%;
    height: 1%;
    opacity: 0.0


<asp:Image ID="Image1" runat="server" EnableTheming="True" ImageAlign="Bottom"  CssClass="backgroundImageFix"
    ImageUrl="~/Img/Besuchermanagement_1920_1080.jpg" />

现在我不再有任何闪烁的问题了。

但我不明白为什么添加图片会阻止背景图片在回发时重新加载。我希望任何人都可以向我解释,也许给我一个更好的解决方案。

【问题讨论】:

您使用的是 ajax 回发,还是整页回发?这也是网络表单还是 mvc? 这是网络表单。在后面的代码中有 AutoPostBack 属性为 true 的复选框和带有 onclick 方法的按钮。 我猜你没有使用更新面板。 但是当我想更新一个 sql 表时我需要那个回发? 【参考方案1】:

在回发期间页面重新加载,因为它有一个生命周期,这使得页面重新加载,这是闪烁 但是为了避免你可以在 asp.net 中使用更新面板控件

 <asp:ScriptManager ID="ScriptManager1" runat="server" />

 <asp:UpdatePanel id="UpdatePanel1" runat="server">
     <ContentTemplate>

              //your code here

      </ContentTemplate>
 </asp:UpdatePanel>

这应该会阻止背景图像闪烁

【讨论】:

Updatepanel 只在客户端更新?因为我需要更新一个sql表,所以客户端必须通过回发与服务器通信? 是的,更新面板将在客户端工作,但其余部分将由 asp.net 事件处理,您所要做的就是尝试在更新面板中写入所有按钮和内容以停止闪烁问题 将我的所有内容放在一个更新面板中对我很有帮助。【参考方案2】:

你有几个选择

您应该使用更新面板 - 它只会“回发”面板内的所需数据并在更新面板内重绘屏幕的一部分 - 阅读 this 以了解 microsoft ajax 如何为您提供帮助。我认为无论如何你都应该使用更新面板,因为它是更好的用户体验。

另外,由于未设置正文的背景颜色,也可能导致此问题。然后它将默认不透明,并且页面将为白色。您可以尝试将背景颜色设置为类似于图像的颜色。过去我已经看到这减少了页面上的闪烁。

【讨论】:

以上是关于asp .net背景图像在回发时闪烁的主要内容,如果未能解决你的问题,请参考以下文章

如何避免在回发时从 asp.net 重复输入?

在回发期间启用/禁用 Asp.net Image 按钮

如何在回发 ASP.Net Core 后保持选项卡处于活动状态

Gridview 中 TemplateField 中的复选框在回发时丢失

在回发时,如何向验证摘要添加错误消息?

jQuery填充的Gridview在回发时丢失数据