zoukankan      html  css  js  c++  java
  • 实现 网页的 数据加载中.... 效果,很简单哦

    数据量比较大的时候,页面加载往往加载需要一些时间,而这个时候用户如果只看到白屏的网页会以后IE死了,为了使自己的网站更加人性化。用javascript来实现页面正在加载中的提示,先网页面里面写入一个层,显示加载框,然后等页面结束后在body的onload中写入事件,隐藏该对话框
             #region "页面加载中效果"
             
    /// <summary>
             /// 页面加载中效果
             /// </summary>
             public static void initJavascript(System.Web.UI.Page page)
             {
                 StringBuilder Builder 
    = new StringBuilder();
                 Builder.Append(
    "<style>");
                 Builder.Append(
    "#loader_container {text-align:center; position:absolute; top:40%; 100%; left: 0;}");
                 Builder.Append(
    "#progress {height:5px; font-size:1px; 1px; position:relative; top:1px; left:0px; background-color:#8894a8;}");
                 Builder.Append(
    "#loader_bg {background-color:#e4e7eb; position:relative; top:8px; left:8px; height:7px; 260px; font-size:1px;}");
                 Builder.Append(
    "</style>");
                 Builder.Append(
    "<div id=loader_container>");
                 Builder.Append(
    "<div id=loader style='left: 300px; top: 150px;border- 3px; border-color: #B3D9D9; border-style:solid; position: absolute;z-index: 20000; background-color: #D1E9E9; cursor: wait;  300px; height: 75px;vertical-align: middle; padding: 10px 10px 10px 10px;'>");
                 Builder.Append(
    "<div id=loader_bg><div id=progress> </div></div>");
                 Builder.Append(
    "<div align='center' style='text-align:center;100%'> <br/>页面加载中,请稍等...</div>");
                 Builder.Append(
    "</div></div>");
                 Builder.Append(
    " <script language=JavaScript type=text/javascript>");
                 Builder.Append(
    "var t_id = setInterval(animate,10);");
                 Builder.Append(
    "var pos=0;var dir=2;var len=0;");
                 Builder.Append(
    "function animate(){");
                 Builder.Append(
    "var elem = document.getElementById('progress');");
                 Builder.Append(
    "if(elem != null) {");
                 Builder.Append(
    "if (pos==0) len += dir;");
                 Builder.Append(
    "if (len>32 || pos>79) pos += dir;");
                 Builder.Append(
    "if (pos>79) len -= dir;");
                 Builder.Append(
    " if (pos>79 && len==0) pos=0;");
                 Builder.Append(
    "elem.style.left = pos;");
                 Builder.Append(
    "elem.style.width = len;");
                 Builder.Append(
    "}}");
                 Builder.Append(
    "function remove_loading() {");
                 Builder.Append(
    " this.clearInterval(t_id);");
                 Builder.Append(
    "var targelem = document.getElementById('loader_container');");
                 Builder.Append(
    "targelem.style.display='none';");
                 Builder.Append(
    "targelem.style.display='none';");
                 Builder.Append(
    "}");
                 Builder.Append(
    "</script>");
                 HttpContext.Current.Response.Flush();
    //这里在内容页前加入事件,防止页面原本的布局乱了,用HttpContext.Current.Response.Write的方法会使页面布局乱了
                 page.ClientScript.RegisterClientScriptBlock(page.GetType(), "messagesss", Builder.ToString());
             }
             #endregion


    调用方法很简单,只需要在Page_Load()时间调用该方法:注意要写在 if (!IsPostBack) 里面
    然后在<body onload="remove_loading();">,这里是用来隐藏DIV的;
    是不是感觉很简单呢?
  • 相关阅读:
    4g内存装64位WIN7好还是32位好(遇到问题,百度后解除疑惑)
    Windows Phone 7.5 “Mango”消息泄露 支持HTML5和Silverlight
    Tiobe发布2010年12月开发语言排名
    Adobe:Flash 10.2将全面提升性能
    ADO.NET Entity Framework使用实体数据
    使用GPU.NET针对GPU编程
    ADO.NET Entity Framework入门(实体框架)
    完美程序员的10种品质
    ADO.NET Entity Framework(实体框架)
    不适合当一名开发人员的10种迹象
  • 原文地址:https://www.cnblogs.com/lujin49/p/2132148.html
Copyright © 2011-2022 走看看