javascript - 单击后不会立即加载预加载器

标签 javascript jquery html css preloader

我想为我的网页使用预加载器。单击我页面上的链接后,当前预加载器不会立即加载。可以看到现有页面,一段时间后(加载新页面前几秒钟)预加载器开始工作,新页面可见。我希望我的预加载器在我刷新或单击网页上的任何链接后立即工作。

#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/

相关文章:

javascript - 将内容复制到另一个没有 jQuery 标签的文本区域

html - 导航栏初始透明并在滚动后应用线性渐变

javascript - 在其自己的 HTML 列中插入 Google Chart 而不会溢出其他列

javascript - 如何在 Canvas 中获取图像的实际大小?

javascript - 在 php if 语句中使用 javascript 变量

javascript - 内联编辑后如何将数据发送到服务器?

javascript - 如何在游戏中添加多个 block

javascript - 在 Electron 中更改可拖动区域上的光标

javascript - 为什么函数的原型(prototype)必须是它的子函数?

javascript - 如何将地点列表与 Google map 点连接