原理 先建立一个div全屏,然后网页加载完成后隐藏div。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>呵呵</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <style type="text/css"> #loading{ position: fixed;background-color: #fff; bottom: 0px;left: 0px;right: 0px;top: 0px; z-index: 999999;} #status{ position: absolute; left:50%; top:50%; width:250px; height:250px; margin: -125px 0 0 -125px; } .center-text { margin:auto; background-image: url("loading.jpg"); background-position: center top; background-repeat: no-repeat;height: 182px; text-align: center;width: 220px;} .center-text span { color: #999999; font-size: 14px; position: relative; top: 170px;} </style> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script > $(document).ready(function(){ $("#status").fadeOut(); $("#loading").delay(350).fadeOut("slow"); }) </script> </head> <body> <div id="loading"><div id="status"><p class="center-text"><span>拼命加载中···</span></p></div></div> <table width="100%" border="1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>2</td> <td>1</td> </tr> <tr> <td>3</td> <td>1</td> </tr> <tr> <td>2</td> <td>3</td> </tr> <tr> <td>2</td> <td>3</td> </tr> <tr> <td>8</td> <td>9</td> </tr> <tr> <td>2</td> <td>0</td> </tr> <tr> <td>1</td> <td>9</td> </tr> </table> </body> </html>