Home javascript How to make a preloader while loading JS?

How to make a preloader while loading JS?




The page has an HTML element that is styled by a Jquery plugin.
And while the page is loading with JS, the styles of this element are jumping

Answer 1, authority 100%

It is enough to close the elements you need or all the elements on the page with a preloader, which will disappear after the necessary actions on the page.

The example has been improved. The jquery version is deprecated, but has been abandoned to show how not to do it.

Updated version (2019):

function loadData () {
 return new Promise ((resolve, reject) = & gt; {
  // setTimeout is not part of the solution
  // The code below should be replaced with logic suitable for solving your problem
  setTimeout (resolve, 2000);
loadData ()
 .then (() = & gt; {
  let preloaderEl = document.getElementById ('preloader');
  preloaderEl.classList.add ('hidden');
  preloaderEl.classList.remove ('visible');
# preloader {
   position: fixed;
   left: 0;
   top: 0;
   z-index: 999;
   width: 100%;
   height: 100%;
   overflow: visible;
   background: #fbfbfb url ('// cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/processing.gif') no-repeat center center;
.visible {
 visibility: visible;
 opacity: 1;
 transition: opacity 2s linear;
.hidden {
 visibility: hidden;
 opacity: 0;
 transition: visibility 0s 2s, opacity 2s linear;
& lt; div id = "preloader" class = "visible" & gt; & lt; / div & gt ;
& lt; p & gt; EXAMPLE & lt; / p & gt; 

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions