要基于jQuery实现模拟页面加载进度条，需要以下几个步骤：
第一步：HTML结构
首先需要有一些基本的HTML结构，如下所示：
<html>
<head>
<title>基于jQuery实现模拟页面加载进度条</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="progressBar">
<div class="bar"></div>
</div>
<div class="content">
<h1>页面内容</h1>
<p>这里是页面内容……</p>
</div>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
这里有三个部分，一个进度条、一个页面内容区域和两个JS文件（jQuery和自己写的脚本）。其中，进度条部分的HTML结构如下：
<div class="progressBar">
<div class="bar"></div>
</div>
这里使用了一个外层容器和一个内层容器，通过设置内层容器的宽度来模拟进度条效果。
第二步：CSS样式
接下来需要为进度条和页面内容区域设置CSS样式。这里只列出了进度条部分的样式：
.progressBar {
width: 100%;
height: 10px;
background-color: #f0f0f0;
}
.progressBar .bar {
height: 100%;
background-color: #00a3d9;
width: 0;
transition: width 1s ease-in-out;
}
其中，.progressBar是外层容器的样式，.progressBar .bar是内层容器的样式。这里设置了进度条高度、背景色和内层容器的初始宽度为0，以及一个CSS动画效果。
第三步：jQuery实现
最后是实现进度条效果的jQuery代码部分，代码如下：
$(window).on('load', function () {
$(".bar").animate({width: "100%"}, 1000, function () {
$(".progressBar").fadeOut(1000);
$(".content").fadeIn(1000);
});
});
这里使用了jQuery的animate()方法来控制进度条内层容器的宽度变化，实现模拟加载进度条的效果。同时，当进度条达到100%时，使用fadeOut()方法隐藏进度条，使用fadeIn()方法显示内容区域。
下面还有两个示例说明：
示例1
如果需要在页面中添加一个图片，那么可以在图片加载后再让进度条消失。代码如下：
$(window).on('load', function () {
var imgCount = $('img').length;
var loadedImgCount = 0;
$('img').on('load', function () {
loadedImgCount++;
var progress = loadedImgCount / imgCount * 100;
$(".bar").animate({width: progress+ "%"});
if (loadedImgCount === imgCount) {
$(".progressBar").fadeOut(1000);
$(".content").fadeIn(1000);
}
});
});
这里使用了$('img').length获取页面中图片的数量，然后使用$('img').on('load', function () {});监听每张图片的加载事件，当图片加载完毕时，就计算出加载进度百分比并更新进度条。当所有图片都加载完毕后，再让进度条消失。
示例2
如果需要在页面中加载一些异步数据并显示列表，也可以根据实际需要控制进度条的变化。代码如下：
$(window).on('load', function () {
$.ajax({
url: 'data.json',
dataType: 'json',
success: function (data) {
var list = '';
$.each(data, function (index, item) {
list += '<li>' + item + '</li>';
});
$('.list').append(list);
$(".progressBar").fadeOut(1000);
$(".content").fadeIn(1000);
},
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
var progress = percentComplete * 100;
$(".bar").animate({width: progress+ "%"});
}
}, false);
return xhr;
}
});
});
这里使用的是jQuery的$.ajax()方法请求异步数据，然后在成功回调中根据数据生成列表并将其插入到页面中。同时，在xhr回调中监听progress事件，通过计算已加载数据的百分比更新进度条。最终在所有数据加载完毕后再让进度条消失。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jQuery实现模拟页面加载进度条 - Python技术站
微信扫一扫 
支付宝扫一扫 