预备知识制作进度条实现不是我们*敏*感*词*，而是根据页面的内容实时获取页面载入

　　预备知识制作进度条实现不是我们*敏*感*词*，而是根据页面的内容实时获取页面载入

　　常用的网页加载进度条，今天给大家带来的进度条不是我们的*敏*感*词*，而是根据页面内容获取实时的页面加载进度。加载进度条在页面上看到的非常多，相信你在一些网页上也看到过类似的交互效果。随着HTML5的流行，各种CSS3*敏*感*词*和JS特效在网页中层出不穷。 PC端加载数据的速度还不错，移动端比较慢。如果图片或者脚本没有完全加载，用户在操作的过程中会出现各种问题，所以这里我们需要一个进度条操作。如果我们没有这样的进度条，用户将看到一个空白页面等待。这个用户体验很差，所以大家都会在网上看到很多进度条。单独实现一个进度条效果很简单，但是不是根据数据的加载来检测进度条的，会显得很别扭，会导致进度条被加载的尴尬情况数据还没有出来。 ，所以我们需要检测数据加载并以更人性化的方式呈现给用户。

　　制作进度条的初步知识，网页加载进度条误区

　　很多朋友说我们可以在进度条上加一个计时器吗？比如我们延迟3秒，或者5秒后加载我们的相关内容，这种方法并不代表就不能。如果网页延迟 3 秒，大多数主题和图像将被加载。 ，也可以。

　　使用定时器可以解决一些问题，但缺点也很大。比如我们已经打开了页面，已经有本地缓存​​，使用定时器的效率很低，因为请不要有这个缓存，会延迟3秒执行，所以效率和体验不太好。有的小伙伴之所以使用定时器，是因为网上搜索进度条的实现方式大部分都是由定时器来完成的。这种方法在性能上只能说是实现了进度条，但本质上并非如此。进度条。

　　

　　

　　先用定时器的方法给大家展示一下布局结构。我们在正文中加载页面内容。主要部分是图像。代码有几十kb。一些大型横幅图片甚至可以达到1万亿以上。要大，所以页面上的图片是我们加载的重点。找了几张大图给大家演示，为了让加载慢一些，代码如下：

　　HTML 代码：

　　

../img/1.jpg

../img/2.jpg

../img/3.jpg

../img/4.jpg

../img/bigimg.jpg

　　CSS 代码：

　　.loading{

width: 100%;

height:100%;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background: #fff;

}

　　来看看这个时候的效果：

　　

　　

　　此时，我们看到div已经完全覆盖了我们的网页。如果页面上只有这样一个白色，那就太无聊了。我们不知道它是什么，所以这里需要加载一个小*敏*感*词*，那么这个*敏*感*词*怎么做呢？我们可以加载图片的一种方式，我们也可以使用css3加载一些有趣的小*敏*感*词*。我向您推荐如何找到有趣的图像。打开这个网站：preloaders 这是一个@k14可以在线生成GIF图标@，可以根据自己的需要选择，也可以修改相关颜色参数等设置。如果默认，直接下载即可。

　　

　　

　　在页面中引入这张GIF图片，我们在原来的div中插入GIF图片，类为pic

　　

>

　　CSS 样式：

　　.loading .pic{

width: 64px;

height: 64px;

border:1px solid red;

background: url(../img/loading.gif);

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

}

　　页面效果：

　　

　　

　　接下来我们看一下js部分，它会在固定时间隐藏加载页面内容3秒

　　$(function(){

setInterval(function(){

$(".loading").fadeOut();

},3000)

})

　　这种内容只是硬编码数据，并不能真正反映我们加载的内容，所以这种方法并不完全正确。这里只是介绍一下我们如何在body中布局结构，我们可以直接在div中添加，也可以直接在js中做这一步，直接以字符串的形式添加到body中，不用写它在 body 的内容之一，最终效果是一样的：

　　$(function(){

var loading = '';

$("body").append(loading);

setInterval(function(){

$(".loading").fadeOut();

},3000)

})

　　通过加载状态事件制作进度条

　　通过加载状态事件制作进度条需要用到哪些知识点，一起来看看：

　　document.onreadystatechange 页面加载状态时的事件

document.readyState 返回当前文档的状态

　　document.onreadystatechange 当我们向服务器发送请求时，服务器也会以不同的事件返回给我们。我们用它来检测页面状态的变化。

　　document.readyState 这是服务器返回的请求。当然，这两个必须一起使用。

　　这两个方法其实是我们网站中用得最多的。其实你在网上看到很多这样的加载进度条。基本上，这两个事件用于执行此操作。这就是我们要实时检测我们要加载的数据，所以接下来我们就用这两个事件来完成这个小案例。

　　当然 document.readyState 仍然有几个状态。这里我们向服务器发送请求有几个过程，分别是：

　　在这整个过程中，我们主要想要的是最后一个事件，那么这个事件就是我们完成后的返回结果，说明加载成功，这时候我们可以隐藏进度条来显示我们页面的主要内容下面我们根据这么几个知识点介绍一下这样的用法。

　　基本布局和上面一样，这里不再赘述，我们来看看这些时间的用法

　　document.onreadystatechange = function () {}

　　document.onreadystatechange 方法和我们之前写的 window.onload 方法是一样的。该函数表示要执行的内容，当文档改变时执行。然后我们来看看document.readyState的四种状态。我们可以使用console.log()单独打印出来，在后台查看效果。

　　document.onreadystatechange = function () {

console.log(document.readyState);

}

　　背景显示：

　　

　　

　　我们可以看到console.log从上图中返回了两个事件。当然这个图片已经加载好了，所以向服务端请求速度更快，一个是页面加载未初始化，一个是加载完成。我们无法检测到前两个事件。事实上，我们不需要看前几个事件。我们只需要看最后一个。如果出现 complete 的值，说明我们的请求已经成功。那我们看看怎么写。

　　document.readyState == "complete"

　　此时，就意味着我们的请求完成了。在这里我们可以做一个事件。如果我们的结果等于完成，那么我们可以写一个结果并隐藏它的负载。

　　document.onreadystatechange = function () {

if(document.readyState == "complete"){

$(".loading").fadeOut();

}

}

　　看效果：

　　

　　

　　这时候可以看到加载速度非常快。如果等于这个结果，上面的div层会自动隐藏。事件方法简单粗暴，内容也很简单。你只需要记住这两个主要事件。里面的内容写起来可能很复杂。我只是把它们藏在这里。您可以根据自己的要求进行设计。

　　css3进度条小*敏*感*词*

　　在上面的示例中，我们使用图像作为进度条。完成一个*敏*感*词*，我们的代码可能需要几个b文件或者几个KB文件，但是图片比我们的代码多，所以从长远来看，代码会让我们的页面加载速度更快，所以试试不要使用图像代替图像。然后我们将介绍一个小的css3*敏*感*词*，通过加载这个网站可以为我们提供一个进度条*敏*感*词*。

　　

　　

　　包括SVG、CSS、GIF等格式，功能非常强大，可以设置图片的属性，*敏*感*词*大小，速度，颜色等

　　

　　

　　这个网站收录很多类型，我们可以直接使用，我们可以生成GIF，或者css文件，我们可以在我们的样式规则中使用这个css，当然样式很多，大家可以看看，如果能满足我们的需求，可以直接使用。不能满足就只能自己写了。

　　接下来给大家实现一下，玩一下css3*敏*感*词*，布局还是和上面说的一样，我们需要换个图片，然后把下载的css文件引入到我们的demo中。

　　我们下载的文件如下所示：

　　

　　

　　我们需要改变我们的图片的宽高，位置保持不变，但不是引用图片，而是我们刚刚生成的css*敏*感*词*文件，此时的HTML布局：

　　

../img/bigimg.jpg

../img/1.jpg

../img/2.jpg

../img/3.jpg

../img/4.jpg

../img/bigimg.jpg

../img/bg2.jpg

../img/bigpic.jpg

../img/bigimg.jpg

../img/bigpic.jpg

../img/bigimg.jpg

　　在HTML代码中，可以看到我写了几大块内容来加载静态数据。我们按照顺序来做。例如，当我们的页面转到头部时，我们编写了一个代码块。这个方法意味着会用到一些特殊的页面，但是这个方法没有我们之前提到的那么实用，因为这里会写很多内容。比如我们的页面去到header部分的时候，我们使用了一个animate*敏*感*词*，我们改变了它的width值，也就是它到了这个地方的时候的width值，等等，下面的部分是一样的， animate *敏*感*词*设置不同。宽度值表示走了多长时间，代码如下：

　　

../img/bigpic.jpg

../img/bigimg.jpg

$(".loading .pic").animate({

width: "10%"

}, 100)

../img/1.jpg

../img/2.jpg

$(".loading .pic").animate({

width: "30%"

}, 100)

../img/3.jpg

../img/4.jpg

$(".loading .pic").animate({

width: "50%"

}, 100)

../img/bigimg.jpg

../img/bg2.jpg

$(".loading .pic").animate({

width: "80%"

}, 100)

../img/bigpic.jpg

../img/bigimg.jpg

$(".loading .pic").animate({

width: "95%"

}, 100)

../img/bigpic.jpg

../img/bigimg.jpg

$(".loading .pic").animate({

width: "100%"

}, 100, function() {

$(".loading").fadeOut();

})

　　CSS 代码：

　　.loading{width: 100%;height:100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;}

.loading .pic{width: 0%;height: 5px;position: absolute;top: 0;left: 0;background: #0044CC;}

　　当进度条达到100%时，我们需要隐藏进度条，所以需要添加一个隐藏进度条的函数。但是这种东西有一个问题，就是我们看着这个东西已经加载了，但是这个图片只是加载了这个数据进去，它的一些图片是从上到下慢慢加载的，这个不影响我们这个页面，所以这个方法大家也可以用，这就是使用自上而下的执行顺序的效果。

　　实时获取数据加载进度条

　　接下来，我将带领大家完成项目中比较实用的加载数据实时获取的进度条方法。上面的进度条例子都是*敏*感*词*，没有实时数据采集。有的网站从0到100%逐渐结束，你可以看到相应的变化。这时候用户会觉得我们有希望达到100%。加载我们的数据，使其比我们之前提供的方法越来越好。

　　实现实时访问加载数据的进度条功能需要哪些知识？

　　这里的进度条使用纯css3写*敏*感*词*效果。这很简单。也有不懂css3的朋友。去补课。你可以下载我的代码，稍后学习。我主要是带大家来。做js部分。

　　HTML 代码：

　　

0%

../img/bigimg.jpg

../img/bigimg.jpg

../img/bigimg.jpg

../img/bigimg.jpg

../img/bigimg.jpg

　　CSS 代码：

　　

* {

margin: 0;

padding: 0;

}

.loading {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background: #fff;

}

.loading .pic {

width: 100px;

height: 100px;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

font-size: 30px;

text-align: center;

line-height: 100px;

}

.loading .pic span {

display: block;

width: 80px;

height: 80px;

position: absolute;

top: 10px;

left: 10px;

border-radius: 50%;

box-shadow: 0 3px 0 #666;

-webkit-animation: rotate 1s infinite linear;

animation: rotate 1s infinite linear;

}

@-webkit-keyframes rotate {

0% {

-webkit-transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

}

}

@keyframes rotate {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

}

　　接下来我们来看看js怎么写。首先，引入jQuery库并加载文档。当然，这是为了区分 window.onload 只是不让我们提前加载这个文件。如果我们想定义一个预加载，这通常是这样做的。我们定义了一个对象，例如 var=new Image()。如果是预加载，我们需要定义一个图片img.src = "pic.jpg"，然后我们会这样写，当img.onload成功时给它一个当时的事件，比如已经成功，得到将数据分配给某个图像，或将其分配给某个元素，或将结果返回给它。一般图像定义如下代码：

　　

$(function(){

var img = new Image();

img.src = "tupian "

img.onload = function () {

}

})

　　当然，我之前说过，我们通常把src放在onload事件下，这是为了解决缓存的问题，如果有缓存，这段代码会被忽略，也就是什么都不执行。 ，所以我们通常把src放在onload事件下，如下代码：

　　

$(function(){

var img = new Image();

img.onload = function () {

}

img.src = "tupian "

})

　　当然，上面的代码只是针对一张图片，只是给大家提供思路。并且我们的页面中有很多图片，我们通常这样做，定义一个 var img = $("img");这就是大家都知道的就是获取我们所有的img元素，获取元素然后我们需要给它添加一个each循环，在循环中定义一个oImg，在外层定义一个变量num，表从0开始，每次执行，让num++，然后在每个我们把这张图片复制过来，让oImg对象的src给我们所有的图片赋值，也就是每次循环给它一个图片的路径，所以既然每次都是这样，我们就通过变量 i 传递它。

　　

$(function(){

var img = $("img");

var num = 0;

img.each(function(i) {

var oImg = new Image();

oImg.src = img[i].src;

})

})

　　然后我们开始写load，我们在load中执行num。这里我们主要做这样的判断，因为这样i可以实时获取我们所有的图片，所以如果num的个数等于i，我们就加载只获取元素并隐藏起来。

　　现在让我们实时获取数据。首先我们获取显示数字的内容，通过html()方法改变结构。然后我们改变num的值，因为它从0开始除以num。在数量上，这个图片的数量必须是固定的，$("img").size() 就是它的数量。这个数字必须除以一个十进制数。为了得到这个数，我们可以让它乘以100，此时得到的数据是0到100，然后四舍五入。但是我需要这个数据来显示百分号，加上一个字符串百分号，这个时候数据就好了。但是这里有一个问题。页面数据加载时，也就是100%，如果num等于i，页面会一直处于100%的状态，不会显示主界面，所以我们把代码逻辑改成（如果num >=i) 这个设置可以避免这个问题。

　　我这里的图片都是用来测试的，结果可能不明显。所以在尝试的时候，选择图片越大，数据越大，进度条的效果越明显。

　　这里我们也需要解决这样的一个bug。有时不可避免的页面上会出现GIF图像。当GIF图片较大时，可能会多次请求onload，所以我们会在加载前先onload oImg对象。清除它 oImg.onload = null;这次它会清除我们重复的请求。

　　完整的js代码：

　　

$(function(){

var img = $("img");

var num = 0;

img.each(function(i) {

var oImg = new Image();

oImg.onload= function () {

oImg.onload = null;

num++;

$(".loading b").html(parseInt(num/$("img").size()*100) + "%");

if(num >= i){

$(".loading").fadeOut();

}

}

oImg.src = img[i].src;

})

})

　　源码下载：源码

　　结论

　　以上都是关于进度条效果的实现。每种方法都有自己的特点。当然，代码并不完美，也存在一定的缺陷。比如我们的页面可能有视频，所以视频的*敏*感*词*法是一样的。我定义了视频的属性并获得了这些属性的加载进度。当然，页面上还有一些视频。我们的代码仍然可以解决大部分问题。当然，你也可以在网上找到一些更酷的。我希望你可以通过上面的例子练习更多。不明白的可以留言讨论。如果句子不流畅，还望你海涵。