我想为我的网页使用预加载器。单击我页面上的链接后,当前预加载器不会立即加载。可以看到现有页面,一段时间后(加载新页面前几秒钟)预加载器开始工作,新页面可见。我希望我的预加载器在我刷新或单击网页上的任何链接后立即工作。
#loading{
position: fixed;
width: 100%;
height: 100vh;
background: #fff
url('https://static-steelkiwi-dev.s3.amazonaws.com/media/filer_public/2b/3b/2b3b2d3a-437b-4e0a-99cc-d837b5177baf/7d707b62-bb0c-4828-8376-59c624b2937b.gif')
no-repeat center center;
z-index: 99999;
}
<!DOCTYPE html>
<html>
<head>
{% load static %}
<link rel="stylesheet" href="{% static '/styles1.css' %}">
</head>
<body onload="myFunction()" class="hold-transition skin-green sidebar-collapse sidebar-mini fixed">
<div id="loading"></div>
...
...
<script>
var preloader = document.getElementById("loading");
function myFunction(){
preloader.style.display = 'none';
};
</script>
</body>
</html>
请帮忙解决这个问题
谢谢
最佳答案
此示例仅适用于 Django 元素。在正常的 html 中,{% load static %} 将不可用。
如果您尝试不使用任何框架。您为 css 文件使用相对路径,否则将找不到 css 文件并且加载程序将不会显示。 使用这样的相对路径(考虑同一文件夹中的 html 和 css 文件):
<link rel="stylesheet" href="styles1.css">
关于javascript - 单击后不会立即加载预加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56182365/