javascript 正在加载中,请稍后效果实现

本文介绍了一种利用CSS和JavaScript实现网页加载时显示遮罩和动态加载图片的方法。通过设置CSS样式来定义遮罩层的外观,并使用JavaScript控制遮罩层的显示与隐藏。同时介绍了如何在页面加载过程中展示动态加载图标。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

 

/*蒙版*/
.loading-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    opacity: 0.3;
    filter: alpha(opacity = 30);
    z-index: 10000;
}

/*动态加载图片*/
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(loading.gif) 50% 50% no-repeat;
z-index: 10010;
}

 

 

//增加body遮罩
function maskElement(maskLevel) {
    if (!maskLevel) {
        maskLevel = '0';
    }

    if ($(".mask-level-" + maskLevel).length == 0) {
        $("body").append('<div class="loading-mask mask-level-' + maskLevel + '"></div>');
    }
}

//取消body遮罩
function unmaskElement(maskLevel) {
    if (!maskLevel) {
        maskLevel = '0';
    }
    $(".mask-level-" + maskLevel).remove();
}

function loadingShow(isMask) {
    if (isMask) {
        common.maskElement("0");
    }
    if ($(".loading").length == 0) {
        $("body").append('<div class="loading"></div>');
    }
}

function loadingHide() {
    unmaskElement("0");
    $(".loading").remove();
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值