首页 > 网站建设 > 蓝韵观点 > 前端开发 > 网页加载中. . .
网页加载中. . .

作者:周伯通来源:lanyunwork时间:2018.01.29

在访问网站的时候,有些时候是会遇到一些网站很久都加载不出来的情况,页面一片空白,这时候对这个网站的感觉就很糟糕。身为程序员的我们,虽然竭尽全力去优化代码,优化性能,但总还是有些情况我们无能为力。这个时候,如果我们在加载前做一个提示,表明网站正在加载中,特别是使用动画效果,可以一个“等待”的温馨提示,用户体验很不错。

这里我搜集了四种方法制作。

种:在网页较上层做一个加载动画DIV,显示在浏览器上,当网页下载完毕,,用JS关闭这个层。

然后在HTML末尾加入

 

这种简单明了,不过效果可能不会很精确。

第二种:就是利用一个百分比来连续加入一组“||”字符串,然后达到 100% 之后执行一次 self.location.href 跳转。



正在载入...



正在载入首页,请稍候.......


但是这种办法跳转过去再次读取页面而这个效果也就起不到任何预载入的功能,只能说是以假乱真罢了。 

第三种:利用DOM模型的document.all 来 document.layers这两个对象来做判断页面是否加载完毕从而实现层的现实和隐藏。

document.all是IE浏览器所具有的对象集合,一般用if(document.all)来判断是否是IE浏览器,这个集合代表document对象下所有元素;
document.layers是网景Netscape浏览器所具有的对象集合,这个集合代表document对象下所有的layer(层)。 



Loading.....











正在载入XXXX....

第四种:利用window.onload 是在页面完全读取完毕才执行的特性。

跟种方法有点类似,先制作一个加载动画层,放在代码的较前端,优先显示在页面较上面,然后利用window.onload在页面完全读取后执行js函数,关闭这个加载动画层,显现网页。

正在载入,请稍候……
 

这个语句较好是放在页的较前端,也就是紧跟  标签的下面一行,这样才能确保在读页面的时候较先显示这一层。

function initPage()   
{   
    var objLoading = document.getElementById("Loading");   
    if (objLoading != null)   
    {   
        objLoading.style.display = "none";   
    }   
}  

较后,要在头部加上一段 JavaScriptwindow.onload = initPage();

综合以上四种方法:个人推荐第四种,比较容易理解,而且操作起来也简单方便的,精确性也不差。

 

 

与蓝韵项目经理通话

请输入正确的手机号码格式

信息保护中请放心填写

在线咨询
 
提交成功
关闭浮窗