时间戳

首页 > 解决方案 > 任何点击后都不会立即加载预加载器

javascript - 任何点击后都不会立即加载预加载器

问题描述

我想为我的网页使用预加载器。在点击我页面上的链接后，当前的预加载器不会立即加载。可以看到现有页面，并且在某个时间后（在加载新页面前几秒钟）预加载器工作并且新页面可见。我希望我的预加载器在我刷新或单击网页上的任何链接后立即工作。

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

请帮忙解决这个问题

谢谢

标签： javascriptjqueryhtmlcsspreloader

解决方案

此示例仅适用于 Django 项目。与普通 html {% load static %} 一样，将不可用。

如果您尝试没有任何框架。您使用 css 文件的相对路径，否则将找不到 css 文件并且加载程序将不会显示。使用这样的相对路径（考虑到同一文件夹中的 html 和 css 文件）：

<link rel="stylesheet" href="styles1.css">

推荐阅读