ajax异步加载页面，减少用户面对空白网页时间

这个问题网上讲的比较多，我也不知道自己是不是重复造轮子。反正也算是原创，不一定通用但毕竟能解决一些问题。当用户打开一张网页时，如果说页面中的元素比较多，可能会加载一段时间，如果再加上网络环境不太好的情况下，用户可能会面对一张空白的正在加载的页面，会有一种死机的感觉，对于一些不太懂电脑的人来说可能会感到到焦虑。我觉得最好是能先给用户看到部分的网页内容，至少让用户放心，我这个网页是能打开的，然后剩下大量的内容通过异步方式加载，加载过程中显示【数据加载中，请等待....】等这样的等待效果。（本来我想整个网页加载过程中显示等待页面，但是没搞定，首先导致页面速度慢不是后台数据处理的原因，纯粹是页面显示的元素过多，页面没有被完全加载之前，没有办法调用DIV等页面上任何元素，所以无法也显示等待效果，本来想在父页面上调用等待效果，但是我的子页面是window.open方式打开，结果子页面永远在最前端，父页面上的DIV可能遮罩住子页面吗，用Iframe理论上可以，但也没搞定）

//这是我页面上的DIV,  content2 中将会加载大量标签
//div longding是一个等待效果 

 <div id="content2" style=" overflow-y:scroll; overflow-x:hidden; width:1500px">

                                           

                                               <div id="loading">页面加载中，请等待。。。</div>

                                            

      </div>

//主要思路，下面是jquery 异步去加载这些标签内容，加载成功后替换DIV longing

$.post("createBody.ashx", {}, 

           function(data) {

            $("#loading").replaceWith(data);    

         });  

     

//createBody .ashx生成大量的tr,td,div用于返回

 public void ProcessRequest (HttpContext context) {

 

        string strb = testCreate();

 

        context.Response.Write(strb);

    }

 

    private string testCreate()

    {

        StringBuilder strB = new StringBuilder();

        strB.Append(" <table id=\"tb\" width=\"100%\" border=\"0\" cellpadding=\"3\" cellspacing=\"1\" class=\"newtable\">");

        

        for (int i = 0; i <= 300; i++)

        {

            strB.Append("<tr>");

            for (int j = 1; j <= 30; j++)

            {

                strB.Append("<td class=\"newtd2\"><div style=\"width:30px\">" + i + " </div></td>");

            }

            strB.Append("</tr>");

        }

 

        strB.Append(" </table>");

       return strB.ToString();

    }

转载于:https://www.cnblogs.com/yexiang/p/3168740.html