Loading页面

转载最新推荐文章于 2026-03-24 00:18:10 发布 2.4k 阅读 AI写同款

收录于

jquery

code_long

码龄16年墨衍会员 · AI 创作全网分发

35粉丝19篇原创

关注

asp.net 加页面Loading效果 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { Loading(); } } public static void L 阅读详情

AI摘要

本文介绍了一个实用的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");
}

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

标签

#html #jquery