html 简单的加载界面loading.js

时而有事儿

已于 2023-06-20 17:47:07 修改

阅读量3.5k

点赞数 3

文章标签： javascript html 前端

于 2022-10-12 15:23:51 首次发布

本文链接：https://blog.csdn.net/w981912536/article/details/127283505

版权

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);
}

如果嫌弃加载图不好看可以自己找来替换。

代码写的丑，凑合看，又不是不能用。

最后如果对你有一点点帮助，麻烦支持一下。

全国寄快递5元起，电影票8.8折。更多优惠微信关注公众号：【折价寄件】

感谢阅读！！！！

时而有事儿

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html 简单的加载界面loading.js

1、引用jquery.js。2、引用loading.js。3、需要加载时直接调用方法：loading(3)，目前有1、2、3三个参数，分别代表不同样式。4、关闭加载时调用closeLoading()。html 简单的加载界面loading.js。如果嫌弃加载图不好看可以自己找来替换。代码写的丑，凑合看，又不是不能用。
复制链接

扫一扫