下面是jQuery实现加载进度条提示效果的完整攻略：
1. 引入jQuery和进度条插件
在
标签中引入jQuery和进度条插件，比如nprogress：<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" />
<script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
</head>
2. 定义进度条开始和结束的函数
在javascript中定义进度条开始和结束的函数：
function startProgress() {
NProgress.start();
}
function endProgress() {
NProgress.done();
}
可以在页面中手动调用startProgress()和endProgress()函数来启动或停止进度条。
3. 监听ajax请求
监听页面中的ajax请求，在请求开始时启动进度条，在请求结束时停止进度条：
$(document).on({
ajaxStart: function() { startProgress(); },
ajaxStop: function() { endProgress(); }
});
以上方式可以监听整个页面上所有的ajax请求。如果需要监听特定的请求，可以对该请求进行单独设置进度条。
示例1
下面是一个示例，监听一个按钮的点击事件，加载另一个页面并展示进度条：
<button id="load-page">Load another page</button>
<div id="content"></div>
<script>
$('#load-page').click(function() {
startProgress(); // 开始进度条
$.get('another-page.html', function(data) {
$('#content').html(data);
endProgress(); // 结束进度条
});
});
</script>
在点击按钮后，会异步加载another-page.html页面，并在加载完成后展示到#content元素上。
示例2
下面是一个示例，实现图片懒加载并显示进度条：
<img id="img" src="placeholder.jpg" data-src="real-image.jpg">
<script>
$(window).scroll(function() {
var img = $('#img');
if ($(window).scrollTop() + $(window).height() > img.offset().top) {
startProgress(); // 开始进度条
img.attr('src', img.data('src')).load(function() {
endProgress(); // 结束进度条
});
}
});
</script>
在页面滚动到图片位置时，图片才开始加载，加载时展示进度条，加载完成后停止进度条。通过将真实图片的地址存储在data-src属性中，使得占位图片placeholder.jpg能够提前加载，加速页面加载速度。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现加载进度条提示效果 - Python技术站
微信扫一扫 
支付宝扫一扫 