加载图片进度

最新推荐文章于 2023-06-23 18:48:32 发布

web_cgh

最新推荐文章于 2023-06-23 18:48:32 发布

阅读量821

点赞数

分类专栏： Javascript 文章标签： loading Image

本文链接：https://blog.csdn.net/web_cgh/article/details/80622993

版权

Javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="mask"></div>
<div class="percent"></div>
<script src="./app/assets/js/jquery.min.js"></script>
<script>
function loading(){
function Load(){}
Load.prototype.loadImgs = function(urls,callback) {
this.urls = urls;
this.imgNumbers = urls.length;
this.loadImgNumbers = 0;
var that =this;
for(var i=0;i<urls.length;i++){
var obj = new Image();
obj.src = urls[i];
obj.onload = function(){
that.loadImgNumbers++;
callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100));
};
document.body.appendChild(obj);
}
};

var loader = new Load();

loader.loadImgs([
// 将所有需要加载的图片地址写于此处
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3549496778,2425390027&fm=200&gp=0.jpg",
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=866451030,2521292954&fm=27&gp=0.jpg",
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1592505045,1659704969&fm=200&gp=0.jpg",
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3262163130,1934581225&fm=27&gp=0.jpg",
"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4255272324,1037803712&fm=200&gp=0.jpg",
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2992708785,1786612812&fm=200&gp=0.jpg",
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3986646060,1869274485&fm=27&gp=0.jpg",
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3837317128,620771623&fm=27&gp=0.jpg",
"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=560913058,44200008&fm=27&gp=0.jpg",
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=45247271,400854699&fm=200&gp=0.jpg"
],function(percent){
// 假设显示百分比的元素为 $(".percent")
$(".percent").text(percent+'%');

// 加载结束后，隐藏相应的 loading 或遮罩
if(percent==100) {
$(".mask").css('display','none');
}
});
}
// 执行 loading 方法
loading();
</script>
</body>
</html>

web_cgh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
加载图片进度

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="mask
复制链接

扫一扫