Loading page,loading是遮罩页面

最新推荐文章于 2023-12-28 13:35:40 发布

原创最新推荐文章于 2023-12-28 13:35:40 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

.NET 专栏收录该内容

201 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现页面加载时显示遮罩效果的方法。通过创建并定位两个div元素来展示加载图标和背景阴影，最后在页面加载完成时通过jQuery的fadeOut方法隐藏遮罩。

部署运行你感兴趣的模型镜像

JS file page.loading.shadow.js

{

var pageLoadingContainerId = "pageLoadingIconContainer";
var pageLoadingIconContainerId = "pageLoadingShadowContainer";

var loadingIconContainer = document.createElement("div");
loadingIconContainer.id = pageLoadingIconContainerId;

loadingIconContainer.style.cssText = "display: block; background: url(\"/Scripts/Lib/Loading/images/loadingBar.gif\") no-repeat; font-size: 11px; line-height: 20px; margin: auto; text-align: left; text-indent: 36px; width: 220px; height: 19px; z-index: 1209; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; color: #FFF; text-shadow:none;";

var loadingShadowContainer = document.createElement("div");
loadingShadowContainer.id = pageLoadingContainerId;
loadingShadowContainer.style.cssText = "display: block; width: 100%; height: 100%; top: 0; position: fixed; margin: auto; background: url(\"/Scripts/Lib/Loading/images/shadow-overlay.png\") repeat; overflow: hidden; z-index: 1000; padding-top: 20%";

loadingShadowContainer.appendChild(loadingIconContainer);
document.body.appendChild(loadingShadowContainer);

}

在_layout页面引入JS.file

在页面上$document.ready的时候fadeout 遮罩层

$("#" + pageLoadingContainerId).fadeOut();

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率