Loading页面

最新推荐文章于 2025-09-24 11:29:33 发布

转载最新推荐文章于 2025-09-24 11:29:33 发布 · 1.4k 阅读

文章标签：

#html #jquery

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个实用的JavaScript函数，用于在网页上显示加载动画。该函数可以根据目标元素进行局部加载显示，或者应用于整个页面。通过简单的设置，可以轻松地在页面或特定区块上添加加载指示器。

function ShowLoading() {
    var img = $("<img id=\"progressImgage\"  src=\"/images/loading.gif\" />"); //Loading小图标
    var mask = $("<div id=\"maskOfProgressImage\"></div>").addClass("mask").addClass("hide"); //Div遮罩
    var PositionStyle = "fixed";
    var aimDiv = undefined;//可做为参数传递，有将只遮盖div
    //是否将Loading固定在aimDiv中操作,否则默认为全屏Loading遮罩
    if (aimDiv != null && aimDiv != "" && aimDiv != undefined) {
        $(aimDiv).css("position", "relative").append(img).append(mask);
        PositionStyle = "absolute";
    }
    else {
        $("body").append(img).append(mask);
    }
    img.css({
        "z-index": "2000",
        "display": "none"
    })
    mask.css({
        "position": PositionStyle,
        "top": "0",
        "right": "0",
        "bottom": "0",
        "left": "0",
        "z-index": "1000",
        "background-color": "#000000",
        "display": "none"
    });
    img.show().css({
        "position": PositionStyle,
        "top": "40%",
        "left": "50%",
        "margin-top": function () { return -1 * img.height() / 2; },
        "margin-left": function () { return -1 * img.width() / 2; }
    });
    mask.show().css("opacity", "0.1");
}

看了一位博友的文章,挺好用的