search

Home  >  Article  >  Web Front-end  >  How can I show the page loading div until the page is loaded?

How can I show the page loading div until the page is loaded?

王林
王林forward
2023-09-11 10:17:091036browse

如何显示页面加载 div 直到页面加载完成？

Instead of showing an entire white or black screen while the page is loading, a loading indicator is displayed, which also improves the user experience of the application.

Now, there are some libraries that can display loading indicators. However, we can create a custom loading indicator div using HTML and CSS.

In this tutorial we will use HTML, CSS and JavaScript to display the page loading div until the page is loaded

Use onreadystatechange event to display loading indicator when loading page

In JavaScript, whenever the status of the web page changes, the onreadystatechange event will be triggered. The first state is "interactive", which means the web page is interacting and has started loading. The second stage is "Complete", that is, the web page is loaded successfully.

So we can hide the body and show the loading indicator in all other states, and in the "Complete" state we can hide the loading indicator and show the body.

grammar

Users can show and hide the loading indicator based on the status of the document by following the following syntax. 

document.onreadystatechange = function () {
   if (document.readyState !== "complete") {
      
      // show loading indicator and hide body
   } else {
      
      // show body, and hide loading indicator
   }
};

In the above syntax, we will call this function whenever the status of the document changes. It checks if the status is "Complete", then hides the loading indicator and displays the body.

Example

In the example below, we created a div using the "loading_indicator" div and applied some CSS to make it a circular loading indicator.

In JavaScript, we use the onreadystatechange event. This function is executed whenever the state changes. Within the function, we use the document's "readyState" property to get the current state of the document. If the document's current status equals "Complete" we can access and hide the loading indicator and display the entire document body. Otherwise, we can show the loading indicator and hide the document body. 

<html>
<head>
   <style>
      #loading_indicator {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         margin: auto;
         border: 10px solid grey;
         border-radius: 50%;
         border-top: 10px solid blue;
         width: 100px;
         height: 100px;
         animation: spinIndicator 1s linear infinite;
      }
      @keyframes spinIndicator {
         100% {
            transform: rotate(360deg);
         }
      }
   </style>
</head>
<body>
   <h2>Using the <i> onreadystatechange event </i> to show page loading div in JavaScript.</h2>
   <div id = "loading_indicator"> </div>
   <h3> Page Loaded successfully.</h3>
   <img src = "https://www.tutorialspoint.com/static/images/logo-color-footer.png" alt = "image">
   <script>
      document.onreadystatechange = function () {
         if (document.readyState !== "complete") {
            document.querySelector("body").style.visibility = "hidden";
            document.getElementById("loading_indicator").style.visibility = "visible";
         } else {
            setTimeout(() => {
               document.getElementById("loading_indicator").style.display ="none";
               document.querySelector("body").style.visibility = "visible";
            }, 3000)
         }
      };
   </script>
</body>
</html>

Example

In the example below, we use jQuery to display a loading indicator when the page is loading. We added HTML and CSS to the document body.

In JQuery, we use the append() method to append the loading indicator to the document body. After that we use the "load" event to check if the page has loaded and based on that we remove the loading indicator from the web page. 

<html>
<head>
   <style>
      #indicator {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0; 
         margin: auto;
         border: 10px solid grey;
         border-radius: 50%;
         border-top: 10px solid red;
         width: 100px;
         height: 100px;
         animation: spin 1s linear infinite;
      }
      @keyframes spin {
         0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
         }
         100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
         }
      }
   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
   <h2>Using the <i> JQuery load event </i> to show page loading div in JavaScript.</h2>
   <h3>Page Loaded successfully.</h3>
   <img src = "https://www.tutorialspoint.com/static/images/logo-color-footer.png" alt = "image">
   <script>
      $('body').append('<div style = "" id = "indicator"> <div class="loader"> </div> </div>');
      $(window).on('load', function () {
         setTimeout(removeLoader, 2000);
      });
      function removeLoader() {
         $("#indicator").fadeOut(1000, function () {
            $("#indicator").remove();
         });
      }
   </script>
</body>
</html>

We learned to use JavaScript and jQuery to display a loading indicator when the page loads. In the first example, we use JavaScript's onreadystatechange event to show and hide the loading indicator based on whether the page is loaded.

In the second example, we use JQuery's load event to show and hide the loading indicator

The above is the detailed content of How can I show the page loading div until the page is loaded?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery css html append 事件
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to set the radius of a circle using FabricJS?Next article：How to set the radius of a circle using FabricJS?

Related articles

See more