【问题标题】:Asp.net show waiting indicator while refresh page (F5)Asp.net 在刷新页面时显示等待指示器 (F5)
【发布时间】:2015-01-16 18:09:18
【问题描述】:

我使用此页面中的示例,它适用于提交案例。

http://www.aspsnippets.com/Articles/Display-loading-image-while-PostBack-calls-in-ASPNet.aspx

但当用户刷新页面时(通过浏览器或 F5 按钮刷新),此指示器不显示。我尝试使用卸载/加载事件,但它不起作用。 有没有人有任何想法?

提前致谢!

【问题讨论】:

    标签: asp.net page-refresh busyindicator busy-waiting


    【解决方案1】:

    这就是你可以用 CSS 做的事情。

    http://tjvantoll.com/2013/04/24/showing-a-css-based-loading-animation-while-your-site-loads/

    html {
          -webkit-transition: background-color 1s;
          transition: background-color 1s;
        }
    html, body {
          /* For the loading indicator to be vertically centered ensure */
          /* the html and body elements take up the full viewport */
           min-height: 100%;
    }
    html.loading {
          /* Replace #333 with the background-color of your choice */
          /* Replace loading.gif with the loading image of your choice */
          background: #333 url('loading.gif') no-repeat 50% 50%;
    
          /* Ensures that the transition only runs in one direction */
         -webkit-transition: background-color 0;
         transition: background-color 0;
      }
      body {
            -webkit-transition: opacity 1s ease-in;
             transition: opacity 1s ease-in;
      }
     html.loading body {
         /* Make the contents of the body opaque during loading */
          opacity: 0;
    
          /* Ensures that the transition only runs in one direction */
        -webkit-transition: opacity 0;
        transition: opacity 0;
    }
    

    一旦你的页面加载在底部完成,你就可以编写一个 javascript 来删除加载类。

    $( "html" ).removeClass( "loading" );
    

    这是该网站的实时示例。

    http://tjvantoll.com/demos/2013-04-24/loading.html

    【讨论】:

    • 感谢您的帮助。不幸的是,我正在开发 ie8,但我会尝试针对我的情况进行修改。
    • 您可以非常简单地放置一个带有加载图像的类,而不是使用这些花哨的东西,并使用 jquery 的 $document.ready 事件删除该类,它将在任何浏览器中工作
    【解决方案2】:

    我在我的 asp.net 项目中使用 Telerik Radmenu,我所做的是在我的母版页中添加具有不同名称的 showProgress javascript,并在 radMenu OnClientItemClicked 上调用 javascript 函数。

    如果您不使用 Telerik,请尝试使用标签从导航栏中调用 javascript 函数。 测试 enter link description here

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-10-10
      • 1970-01-01
      • 2015-09-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多