首页 HTML/CSS 页面加载中简单实现方法

页面加载中简单实现方法

作者:

修改日期:

如果你使用的是国外空间,不可避免的有的时候网站的打开速度并不是很快,这个时候我们可以模仿电脑的操作系统或是一个简单的提示,告诉别人,网站正在努力加载中,一定程度上可以提高用户的体验度,实现这样的提示效果可以很简单,下面分享一个使用HTML+CSS+JavaScript实现的方法。

首先第一步在body区域加载之前添加一句提示语句:

  1. <div id=“loadingpage”>正在给力加载中…</div>  

然后第二步使用CSS对这段文字进行美化一下,这个可以根据自己的需求进行修饰,以下是一段简单的CSS效果:

  1. #loading{   
  2. color:#fff;background:#FF0000;position:absolute;top:0;left:0;padding:2px 10px;   
  3. }  

最后一步通过javascript进行加载显示:

  1. <script type=“text/javascript”>   
  2. document.write(‘<style>#loading{display:none;}</style>’);   
  3. </script>  

这句话的作用是,当当前网页打开后,隐藏此提示语句。