您的位置：首页 > 其它

Web应用中实现页面加载提示

2017-12-23 18:45 369 查看
processbar.jsp  

  

<%@ page language="java" contentType="text/html; charset=UTF-8"  

    pageEncoding="UTF-8"%>  

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  

<html>  

    <head>  

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

        <title>process bar</title>  

        <script type="text/javascript" language="JavaScript">  

              

            //: 判断网页是否加载完成  

            document.onreadystatechange = function () {   

                if(document.readyState=="complete") {         

                    document.getElementById('divprogressbar').style.display='none';   

                }  

            }   

              

        </script>  

    </head>  

    <body>  

        <div id="divprogressbar"  

            style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-color: #ffffff; filter: alpha (     opacity =     100 ); z-index: 50000">  

            <div style="text-align: center; padding-top: 200px">  

                <table align="center" border="1" width="37%" cellspacing="0"  

                    cellpadding="4" style="border-collapse: collapse" bgcolor="#FFFFEC"  

                    height="87">  

                    <tr>  

                        <td bgcolor="#3399FF" style="font-size: 12px;" height="24"  

                            align="center">  

                            友情提示, 数据正在载入中...  

                        </td>  

                    </tr>  

                    <tr>  

                        <td style="font-size: 12px; line-height: 200%" align="center">  

                            网页正在载入数据中.请耐心等待...  

                            <marquee style="border: 1px solid #000000" direction="right"  

                                width="300" scrollamount="5" scrolldelay="10" bgcolor="#ECF2FF">  

                                <table cellspacing="1" cellpadding="0">  

                                    <tr height=8>  

                                        <td bgcolor=#3399FF width=8></td>  

                                        <td></td>  

                                        <td bgcolor=#3399FF width=8></td>  

                                        <td></td>  

                                        <td bgcolor=#3399FF width=8></td>  

                                        <td></td>  

                                        <td bgcolor=#3399FF width=8></td>  

                                        <td></td>  

                                    </tr>  

                                </table>  

                            </marquee>  

                        </td>  

                    </tr>  

                </table>  

            </div>  

        </div>  

    </body>  

</html>  

  

然后在另外需要使用的页面中加入如下代码即可：  

  

<jsp:include page="processbar.jsp"></jsp:include>  

  

注意哦， 只有当页面加载真的需要花费时间的时候才会看到效果。  
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航