乌徒帮技术范技术中心Javascript › 超简单javascript代码实现网页打开的真实进度条!

超简单javascript代码实现网页打开的真实进度条!

分类:Javascript

由于乌徒帮对网站的源码结构进行了调整,将jquery库在网页头部进行加载,就导致了网页打开速度偏慢。为了让访客在等待时得到回应,今天添加了打开页面时的进度提示。本文介绍了如果用超级简单的javascript代码来实现网页打开时的真实进度条。

使用javascript而非jquery的代码来实现

首先,javascript原生性,jquery基于javascript,如果用jquery还要等jquery库加载完,时间太长,在本例中本来就是要解决加载jquery库导致的拖长打开网页的时间的问题。其次,javascript其实比jquery更加灵活,在寻找关键点时更加准确。

真实的网页加载进度

虚假的加载进度是指在网页不同的地方,例如头部、中间、底部分布几段对进度条进行操作的代码,由于页面代码加载的顺序自上而下,因此头部代码加载完之后进度条出现,加载到中间时让进度条变长,直到加载完毕将进度条去除。真实的网页加载进度不是利用分布在不同位置的代码,而是靠程序判断网页是否加载完整。虽然网上说脚本无法判断网页是否加载完整,然而,我认为只需要一个onload即可确认,当页面元素,包括以外部链接文件为形式的元素加载完以后触发onload事件。

代码超级简单

网络上各种各样的进度条代码,甚至还有插件。否子戈则希望快速,简洁,不需要占用宽带和流量的情况下实施这一方案。那么代码究竟有多么简单呢?

<script>
document.write('<div id="loadingDiv" style="position:absolute;top:50%;margin-top:-.5em;width:95%;text-align:center;">页面正在加载,'+'请等待<span id="loading"></span></div>');
var loading = document.getElementById('loading');//兼容火狐
var s1=setInterval("loading.innerHTML+='.'",300);
var s2=setInterval("loading.innerHTML=''",8000);
window.onload=function(){
clearInterval(s1);
clearInterval(s2);
var loadingDiv=document.getElementById('loadingDiv');loadingDiv.style.display='none';//兼容火狐
loadingDiv.parentNode.removeChild(loadingDiv);
}
</script>

如果进行代码压缩,这段代码少的可怜,而且还兼容各种浏览器。

不过也有朋友嫌弃这段代码的效果也太寒酸了吧,那么我们可以在代码执行之前载入css,对第一句write的内容进行修改,利用setInterval进行效果的处理,实现更加丰富甚至华丽的进度条,本文只讲思路,就不细讲了。

而onload是用来判断页面已经加载完毕的,乌徒帮根本没有用到,而是将这段代码分割为两段,前面是显示进度条,进度条之后是加载外链的js和css文件,这个加载过程是非常辛苦的,因此进度条起作用了,在这些文件加载完之后就是显示页面,于是就用onload.function内部的代码,结束进度条,根本没有等到页面加载完,其实在body加载之前就把进度条去掉了,因为css和js文件加载完之后再加载body内容已经可以正常显示页面了,因此我采用了这种方法。

基于这种思路,你是不是突然也想为自己的网站增加进度条了呢?

填写个人信息,赶快回复吧!