pjblog载入页面进度条显示特效的改进--setTimeout 和 setInterval 的区别

一个很早就有的关于博客页面进度条的特效显示,使用这个一般都是为了个人博客的个性展示。
其实这个特效的原理也很简单,就是利用body完全载入的onload来判断调用一个函数,通过调用的函数设置进度条所在层显示属性隐藏这个层。
不过这样出现的问题就是,如果页面含量过大网速确实很慢等情况下,当页面还有少量内容没有载入时,那个进度条层就一直不会消失。
短暂的进度特效显示会让我们感到眼前一亮,但是一直不消失地在那显示就会令人生厌。

只要查看一下写的两个函数,就知道这里的进度条是利用setInterval 函数设置进度条层改变位置的重复显示来实现的。从这方面考虑,我们只需在这个函数里加上简单的判断,设置超过五秒(或其他你认为合适的时长)就调用隐藏进度框层来实现进度条消失。也可以使用函数setTimeout(5000)这样来实现同样的结果。这样就可以较好地使用这个功能。

关于修改后的代码:

标签内加入如下代码:

2、修改标签为:

并在其下面加入如下代码:

欢迎访问志文工作室
本站页面正在用喝奶de力加载中…
ˉεˉ 别急嘛!

摘录:

setTimeout 和 setInterval 的区别

  window对象有两个主要的定时方法,分别是setTimeout 和 setInteval 他们的语法基本上相同,但是完成的功能取有区别。

  setTimeout方法是定时程序,也就是在什么时间以后干什么。干完了就拉倒。

  setInterval方法则是表示间隔一定时间反复执行某操作。

  如果用setTimeout实现setInerval的功能,就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要 根据使用的方法不同,调用不同的清除方法:

例如:
tttt=setTimeout('northsnow()',1000);

clearTimeout(tttt);

或者:

tttt=setInterval('northsnow()',1000);

clearInteval(tttt);

举一个例子:



或者:



点赞 (0)
  1. 志文工作室说道:

    这个注意一下,以下这段代码最好放在header.asp文件的最下面,这样在网页里的实际位置是在导航栏下的。

    欢迎访问志文工作室
    本站页面正在用喝奶de力加载中…
    ˉεˉ 别急嘛!

    之所以这样做是因为,搜索引擎对放在网页靠前位置的文字比较重视,如果被这样的文字占用了太可惜,在前面的文字应该是网页导航栏关键词相关对SEOul才比较好。而这段代码放在导航栏下,载入速度也不会太慢,位置正合适~~~

  2. www.531.hk说道:

    友情链接申请已经审核!!![face05]
    [reply=任侠,2009-03-23 02:12 PM]对你那个pj转asp.net比较感兴趣~ 合作愉快!
    好像不是在首页显示的?[/reply]

回复 www.531.hk 取消回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code