Preloader isn't loaded right after any click

0
votes

I want to use preloader for my webpage. The current preloader is not loading right after any click on the links that I have on my page. The existing page is seen and after sometime (just few seconds before the loading of a new page) the preloader works and the new page is visible. I want my preloader to work immediately once I refresh or click any links on the web page.

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

Please help to sort out this

Thanks

2
javascriptjqueryhtmlcsspreloader
Can you please provide a full working example? - NullReferenceException

2 Answers

0
votes

This example will only work in Django project . As in normal html {% load static %} will not be available.

If you are trying without any framework. You Use relative path for css file otherwise css file will not found and loader will not show. Use relative path like this(Considering both html and css file in same folder):

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

You needed to remove for any resource when loaded. and it's not body load function. you can try the following code here. 

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>