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

要基于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技术站

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

第一步：HTML结构

第二步：CSS样式

第三步：jQuery实现

相关文章