无作为
不仅仅是一种态度!
当前位置: 无作为 » 技术教程 » wordpress技术经验 » 网站上方添加加载进度条

网站上方添加加载进度条

来给网站上分添加一个加载进度条吧,有时候网站打开慢,用户就直接关闭了,因为也不知道网站还能多久才可以加载出来,有些用户会以为是自己网络卡,有的就觉得是你的网站卡,这里我们给自己的网站上面加上一个加载进度条,让他们看到网站加载到了什么地方,

这样一来用户可能等个5秒就要关闭网页退出了,看到进度条马上了,还可能会继续等下去,既美观,又实用,网站上方添加加载进度条

这里就是样式效果,不过有些浏览器自带了这个功能,打开任何网页都会有个加载进度条的功能,只不过不是很美观,

比如手机UC就有,还有很多的浏览器都有,那么如何给网站加上上方加载进度条呢,这里我们可以通过这一段html5代码来实现:

网站上方添加加载进度条代码

#progress {position:fixed;height: 2px;background:#9C0;transition:opacity 500ms linear; z-index:1000000; top:0;}
#progress.done {opacity:0 }
#progress span { position:absolute; height:2px;-webkit-box-shadow:#2085c5 1px 0 6px 1px; -webkit-border-radius:100%;opacity:1;width:150px; rightright:-10px;-webkit-animation:pulse 2s ease-out 0s infinite; }
@-webkit-keyframes pulse {
30% { opacity:.6}
60% {opacity:0;}
100% { opacity:.6 }}

将以上代码加入网站的css样式文件中,再到网站放统计代码的地方加入以下代码,也可以是foot文件中,都可以:

<div id="progress"><span></span></div><script language="javascript"> $({property: 0}).animate({property: 100}, {
duration: 3000,
step: function() {
var percentage = Math.round(this.property);
$("#progress").css("width", percentage+"%");
if(percentage == 100) {
$("#progress").addClass("done");
}
}
});</script>

当然如果你的网站本身就很快,然后你想追求美观,就美化一下吧,不过对于搜索引擎来说,蜘蛛可以瞎子,看不见任何的美化样式哦,

更多的代码只会加载它抓取的速度,对于个别的网站,本身就打开慢了,就还是精简一些网站的代码吧,

如果您要修改代码的颜色,粗细,可以在css样式里面修改。

历史上的今天:

所有免费资源、福利、电影、破解软件未经允许不得转载:www.wuzuowei.net无作为 » 网站上方添加加载进度条
分享到: 更多 (0)

来句评论吧! 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无作为-不仅仅是一种态度

登录/注册文章归档