html 简单的加载界面loading.js
预览图：
html 简单的加载界面loading.js。使用方便。
步骤：
1、引用jquery.js。
2、引用loading.js。
3、需要加载时直接调用方法：loading(3)，目前有1、2、3三个参数，分别代表不同样式。
4、关闭加载时调用closeLoading()。
5、好了。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="change" value="测试" class="btn">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/loading.js"></script>
<script>
$('#change').on('click', function () {
loading(3);
// 1秒关闭
setTimeout(function () {
closeLoading();
}, 1000);
});
</script>
</body>
</html>loading.js的代码：
// 依赖jq 默认点击<img>标签就会放大，可根据自己情况修改
$(document).ready(function () {
$("body").append("<!--放大图片-->\n" +
"<div class=\"loadingDiv\" style=\"display: none;position:fixed;top:0;right:0;bottom:0;left:0;;z-index:1000;\">\n" +
"<span class=\"loadingImg\" style='width: 300px;height: 300px;margin: auto;position:absolute;top:0;right:0;bottom:60px;left:0;background:center center no-repeat;background-size:contain;'></span>\n" +
"</div>");
});
function loading(index) {
// console.log(index);
var l1 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0177aa60ac8ffe11013f47208b2584.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668149596&t=7945b3c03dbd8393f905cb4a36dc51a0";
var l2 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01d14b5e213551a801216518f11dfe.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668149829&t=b824cb2382436ae43e0fbfb9bb64aa84";
var l3 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c219573400c66ac7252631c15b06.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668150142&t=6fe2d9b6eb4bc9e044db6b1ae3d5d817";
var loadingImg =l1;
if(index===2){
loadingImg=l2;
}else if(index===3){
loadingImg=l3;
}
$(".loadingImg").css("background-image", "url('" + loadingImg + "");
$(".loadingDiv").fadeIn(100);
}
function closeLoading() {
$(".loadingDiv").fadeOut(100);
}
黑蜘蛛
