javascript - 预加载器不会在刷新时注册
问题描述
我正在使用 Python 和 Django 修改网站,我也在使用 bootstrap 4。我正在尝试更改当前使用的预加载微调器(典型的圆形微调器)。
我已经在我的 html 文件、我的 css 文件中输入了预加载器,并制作了一个 custom.js 文件来支持加载器,但是当我刷新页面时,加载器显示标准圆圈。(我已经删除了以前的微调器文件和样式代码,但由于某种原因,当我使用“div id=preloader”时它仍然显示
这是我的预加载器 css 样式。
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f5f5f5;
/* change if the mask should be a color other than white */
z-index: 1000;
/* makes sure it stays on top */
}
.pre-container {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-align: center;
}
.spinner {
width: 40px;
height: 40px;
position: relative;
margin: 100px auto;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #53dd6c;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
@keyframes bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
这是自定义的js文件
$(window).load(function () {
// preloader
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(550).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(550).css({
'overflow': 'visible'
});
});
这是我的 html 文件中的预加载器标记
<div id="preloader">
<div class="pre-container">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
没有错误消息,但我希望显示反弹。
解决方案
推荐阅读
- javascript - 使用 Xrm.Navigation.openWebResource() 后如何从 Web 资源中取回表单数据
- image - 如何在 Keras 的 TensorBoard 回调中添加多个图像
- pandas - 创建具有特定长度的数据框
- python-3.x - 构建函数,该函数从 pandas 数据框中的上一行获取值
- scala - Spark distinct 的实现
- javascript - 无法导入文件
- asp.net - @model.Name 和 @Html.DisplayFor(m => model.Name) 之间的区别
- javascript - 如何制作一组相同的值
- php - 在 Woocommerce 中批量删除产品变体图像
- android - 使用底部导航时保存片段状态