Question

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

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

请帮助解决此问题

谢谢

Answer 1

此示例仅在Django项目中有效。与普通html中一样，{％load static％}将不可用。

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

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

Answer 2

加载后，您需要删除所有资源。它不是身体负荷功能。您可以在此处尝试以下代码。

window.onload = function(){
  var preloader = document.getElementById("loading");
  preloader.style.display ="none"
};

#loading{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #eee
    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;
}

<div id="loading"></div>
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

单击任何按钮后，预加载器均未加载

2 个答案: