加载页面时 JavaScript 旋转圆圈动画不会停止



所以我已经坐了几个小时,但似乎无法弄清楚为什么我的代码不起作用。

我正在尝试在页面加载时制作"旋转圆圈"(或模拟(的动画。到目前为止,我基本上做到了这一点,但我的问题是它不会停止,所以我页面的其余部分不会加载。

Javascript:

// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});

HTML:基本上只是一个带有类似类的div

<div class="se-pre-con"></div>

.CSS

.no - js# loader {
display: none;
}
.js# loader {
display: block;
position: absolute;
left: 100 px;
top: 0;
}
.se - pre - con {
position: fixed;
left: 0 px;
top: 0 px;
width: 100 %;
height: 100 %;
z - index: 9999;
background: url(images / loader - 64 x / Preloader_2.gif) center no - repeat# fff;
}

注意:我使用了本教程:https://smallenvelop.com/display-loading-icon-page-loads-completely/

其他说明:我正在为 ASP.NET MVC 应用程序编写此内容

好的,所以这是一个非常简单的修复。基本上,我只是在渲染jQuery之前调用了我的脚本。我的标题之前看起来像这样:

<head>
<script type="text/javascript" src="~/Scripts/LoadSpinner.js">
</script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<title>@ViewBag.Title - DeviceManagment</title>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
</script>
</head>

我所要做的就是在我的jQuery渲染之后调用我的Javascript文件。

非常简单的解决方案,但仍然希望它能帮助到那里的人。

最新更新