请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

jquery加载图片显示进度条

 
jQuery 进度条是常用于显示页面加载进度的技术,它可以帮助用户更好的了解页面加载进程,并且提高用户体验。下面我们将介绍如何使用 jQuery 进度条显示图片加载进度。

// HTML 代码
<div id="progress"></div>
<img id="image" src="demo.jpg">
// CSS 代码
#progress {
width: 0%;
height: 5px;
background-color: #007bff;
}
// jQuery 代码
$(document).ready(function(){
// 预加载图片
$("#image").load(function() {
// 图片加载完成后隐藏进度条
$("#progress").hide();
});
// 监听图片加载进度
$("#image").on("progress", function(e){
var progress = Math.round(e.loaded / e.total * 100);
$("#progress").width(progress + "%");
});
});
实现效果:当页面加载图片时,通过监听图片加载进度,实时更新进度条的宽度,直到图片加载完成,进度条自动隐藏。

通过以上代码实现了利用 jQuery 进度条显示图片加载进度的功能。同时,我们还可以利用该技术实现其他需要显示进度条的场

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。