wordpress页面加载进度条实现简单方法

谷歌百度一下进度条,99%的内容都是这么说的,在页面头部写一个进度条移动到10%,然后在页面中部使进度条移动到50%,然后在页面尾部使进度条移动到100%,这么做看起来很完美很符合常理,但这么做有个弊端,因为图片的加载是异步加载的,有时候图片什么的没有加载完毕,进度条就已经100%了。所以判断进度条到100%就必须在页面所有元素全部载入之后才可以。

下面是我写的方法,只需要添加一处js就可以了,并且是在页面全部加载完毕之后才跳到100%的。许多朋友要我写进度条,不是我不想写,是因为之前有些错误,现在是已经修正了,所以就贴出来了。代码很少,部分地方已经注释了。

/***************************************************
** 进度条
***************************************************/
$(function()
{
// 页面准备完毕后就开始移动进度条到95%
$('header .loading').animate({'width':'95%'},9000);
// 在页面全部加载完毕之后
$(window).load(function()
{
// 停止进度条动画,直接移动到100%
$('header .loading').stop(1,1).animate({'width':'100%'},333,function()
{
// 到100%完毕后隐藏进度条
$(this).addClass('done').delay(333).slideUp(333);
});
});
});

好了,现在来看你的wordpress,是不是感觉在加载的时候心里有底一些?

时间: 2024-09-18 14:12:35

wordpress页面加载进度条实现简单方法的相关文章

自己动手制作基于jQuery的Web页面加载进度条插件_jquery

静态效果的实现 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 大体的写法如下: body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { positio

pace.js页面加载进度条插件_javascript技巧

本文简单介绍插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容IE8以上的所有主流插件,而且其强大之处在于,你还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约.闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果),如果你擅长修改css动画,那你就可以做出无限种可能性的动画,为你的网站增添个性化特色! 调用方法: 引入Pace.j

用jQuery模拟页面加载进度条的实现代码_jquery

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码 代码如下: *{margin:0;padding:0;font-size:12px} .loading{position:relative;top:0;le

基于jQuery实现模拟页面加载进度条_jquery

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码 代码如下: .loading{position:relative;top:0;left:0} .tip1{float:left;background:#A7

jquery实现加载进度条提示效果_jquery

本文实例讲述了jquery实现加载进度条提示效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>进度条</title> <script type="text/javascript" src="http://lib.sinaapp.co

JS实现网页加载进度条实例

网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程.因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行大

Sys.ScriptLoader与JS加载进度条的实现

js|加载 今天有人问我,163邮箱那样的Javascript加载进度条是如何实现的. 我不知道,不过实现一个不难,因为<script />有onload和onreadystatechange.还有就是,我们有Atlas. Atlas中有个类:Sys.ScriptLoader,它的作用就是在页面中依次地加载多个Script文件.在实现之前,先来分析一下这个类的代码.   1Sys.ScriptLoader = function() {  2  3    // 所有Script的referenc

预加载进度条preload——进阶篇

加载 大家看完预加载进度条preload的基础篇是不是觉得制作进度条也没什么难的,哈哈那么让我们来进一步学习 前面基础篇中,只是对大家说了在单一文件中的进度条制作,这里我再给大家介绍一个加载 外部 swf文件(或jpg)的方法. 这里我们用到了MovieClipLoader的loadClip方法,这个方法也没什么难的,只要大家记住他的格式就成了格式如下: var mcl :MovieClipLoader = new MovieClipLoader();//格式的东西,照搬就好var mclLis

jquery插件NProgress.js制作网页加载进度条

  这篇文章主要介绍了jquery插件NProgress.js制作网页加载进度条的相关资料,需要的朋友可以参考下 NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Googl