0

I want to to display a loader when the page loads and hide it when it is loaded .

the loader is in <div id="loader" >

Is there anyway to show the loader and remain it visible until the page is loaded and then hide the loader? 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<title>Space Host</title>
<link rel="stylesheet" type="text/css" href="Space_host/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Space_host/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="Space_host/css/slick.css">
<link rel="stylesheet" type="text/css" href="Space_host/css/style.css">


</head>

<body>
     <div id="loader" >
     <img src="feature3.svg" alt="Loading" />
     Loading...
</div>
  </div>
<div id="header-holder">
    <div class="bottom-gradiant"></div>
    <nav id="main-nav" class="navbar navbar-default navbar-full">
        <div class="container-fluid">
            <div class="container container-nav">
                <div class="row">
                    <div class="col-md-12">
                        <div class="navbar-header">
                            <button aria-expanded="false" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a href="">
                                <img class="logo" src="" alt="">
                            </a>
                        </div>
                        <div style="height: 1px;" role="main" aria-expanded="false" class="navbar-collapse collapse" id="bs">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="#contact"><span>Support</span></a></li>
                                <li><a class="chat-button" href="Board.php">Tableau De Bord</a></li>
                                <li><a class="chat-button" href="deconnexion.php">Déconnexion</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <div id="top-content" class="container-fluid"> 
            <?php
            if(!empty($userinfo['Avatar']))
            {
            ?>
            <img src="membres/Photo_Membres/<?php echo $userinfo['Avatar']; ?>" class="Photo" width="120px" />
        <?php
        }
        ?>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <label class="big-title">Bienvenue sur votre profil<h2><?php echo $userinfo['Prenom'].' '.$userinfo['Nom']; ?></h2></label> 
                    <?php
                    if(isset($_SESSION['id']) AND $userinfo['id'] == $_SESSION['id']) {
                    ?>
                    <br />
                    <?php
                    }
                    ?>
                    </div>
                <div class="col-md-12">
                    <div class="arrow-button-holder">
                        <a href="#pricing">
                            <div class="arrow-icon">
                                <i class="sphst sphst-arrow-down"></i>
                            </div>
                            <div class="button-text">Je m'abonne</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row-title-only container-fluid more-padding">
    <div class="container">
        <div class="row">
            <div class="row-title">Découvrir tous les avantages de mon abonnement</div>
        </div>
    </div>
</div>
<div id="features" class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-3">
                <div class="feature-box">
                    <div class="feature-icon">
                        <img src="Space_host/images//feature1.svg" alt="">
                    </div>
                    <div class="feature-title">Mes Paramètres</div>
                    <div class="feature-details">
                        <img src="Space_host/images//feature1.svg" alt="">
                        <div class="feature-title">Mes Paramètres</div>
                        <a href="editionprofil.php" class="feature-title">
                        <p><span>&#128073;</span></p></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="feature-box">
                    <div class="feature-icon">
                        <img src="Space_host/images//feature2.svg" alt="">
                    </div>
                    <div class="feature-title">Mes Avantages</div>
                    <div class="feature-details">
                        <img src="Space_host/images//feature2.svg" alt="">
                        <div class="feature-title">Mes Avantages</div>
                        <a href="" class="feature-title">
                        <p><span>&#128073;</span></p></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="feature-box">
                    <div class="feature-icon">
                        <img src="Space_host/images//feature3.svg" alt="">
                    </div>
                    <div class="feature-title">Alimenter Mon Compte</div>
                    <div class="feature-details">
                        <img src="Space_host/images//feature3.svg" alt="">
                        <div class="feature-title">Alimenter Mon Compte</div>
                        <a href="" class="feature-title">
                        <p><span>&#128073;</span></p></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="feature-box">
                    <div class="feature-icon">
                        <img src="Space_host/images//feature4.svg" alt="">
                    </div>
                    <div class="feature-title">Télécharger Des Documents</div>
                    <div class="feature-details">
                        <img src="Space_host/images//feature4.svg" alt="">
                        <div class="feature-title">Télécharger Des Documents</div>
                        <a href="telecharger_docs.php" class="feature-title">
                        <p><span>&#128073;</span></p></a>
                    </div>
                </div>
            </div> 
        </div>
    </div>
</div>
<div id="pricing" class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="row-title">Avantages et prix des abonnements mensuels</div>
            </div>
        </div><br/>
        <div class="row">
            <div class="col-sm-6 col-md-4">
                <div class="pricing-box">
                    <div class="pricing-content">
                        <a class="order-link" href="#">Changer pour <i class="sphst sphst-arrow-down"></i></a>
                        <div class="pricing-title">Standart</div>
                        <div class="pricing-price">2,99 € </div>
                        <div class="pricing-info">Le pack Standart : pour une gestion peu risquée en "bon père de famille".</div>
                        <div class="pricing-details">
                            <ul>
                                <li>Ouverture d'un portefeuille</li>
                                <li>Accès au tableau de bord &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dynamique</li>
                                <li>Mon Trader Pro</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="pricing-box best-choise1">
                    <div class="pricing-content">
                        <a class="order-link" href="#">Changer pour <i class="sphst sphst-arrow-down"></i></a>
                        <div class="pricing-title">Premium</div>
                        <div class="pricing-price">9,99 €</div>
                        <div class="pricing-info">Le pack Premium : pour une gestion modéré avec des gains attratifs.</div><br/>
                        <div class="pricing-details">
                            <ul>
                                <li>Ouverture d'un portefeuille</li>
                                <li>Accès au tableau de bord &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dynamique</li>
                                <li>Mon Trader Pro</li>
                                <li>Mes robots trader</li>
                                <li>Accès à la presse financière</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-4">
                     <div class="pricing-box">
                    <div class="pricing-content">
                        <a class="order-link" href="#">Changer pour <i class="sphst sphst-arrow-down"></i></a>
                        <div class="pricing-title">All Inclusive</div>
                        <div class="pricing-price">14,99 €</div>
                        <div class="pricing-info">Le pack all inclusive : pour une gestion totalement privé.</div><br/>
                        <div class="pricing-details">
                            <ul>
                                <li>Ouverture d'un portefeuille</li>
                                <li>Accès au tableau de bord &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dynamique</li>
                                <li>Mon Trader Pro</li>
                                <li>Mes robots trader</li>
                                <li>Accès à la presse financière</li>
                                <li>Elaboration d'une stratégie &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;financière</li>
                                <li>Gestion privée d'actifs</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="partners" class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row-title">Trusted by the best</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem<br> accusantium</p>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="partners-slider">
                <div><img src="Space_host/images//partner1.png" alt=""></div>
                <div><img src="Space_host/images//partner2.png" alt=""></div>
                <div><img src="Space_host/images//partner3.png" alt=""></div>
                <div><img src="Space_host/images//partner4.png" alt=""></div>
                <div><img src="Space_host/images//partner5.png" alt=""></div>
                <div><img src="Space_host/images//partner6.png" alt=""></div>
                <div><img src="Space_host/images//partner7.png" alt=""></div>
            </div>
        </div>
    </div>
</div>
    </html>
<?php   
}
?>

<script src="Space_host/js/jquery.min.js"></script>
<script src="Space_host/js/bootstrap.min.js"></script>
<script src="Space_host/js/slick.min.js"></script>
<script src="Space_host/js/main.js"></script>

</body>
</html>

I've tried some query code but nothing work for me Please help and thanks in advance!

JakeParis
  • 11,056
  • 3
  • 42
  • 65
SKANDORI
  • 27
  • 7
  • I think [here](https://stackoverflow.com/questions/25253391/javascript-loading-screen-while-page-loads) it's explained very well. And work fine. – rxdue Jun 03 '20 at 19:11

1 Answers1

0

Well, the DOMContentLoaded event is fired on the document when the page is loaded, so you could try this, but it doesn't necessarily mean all the images are loaded. 

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById('loader').style.display = 'none';
});

If you want to know when all the images on the page have been loaded, you could try this at the very end of the page: This gets all the images on the page and checked for their complete property. It continues to check it until they're all set to true.

Here it is working. If you open your dev tools and throttle the network connection, you can see that the "loader" element doesn't disappear until all the images are loaded. 

(function(){
  const imgs = document.querySelectorAll('img');
  const loader = document.getElementById('loader');
  if( ! imgs.length )
    return;

  const hideLoader = function(){
    loader.style.display = 'none';
  };

  const areAllImagesLoaded = function(){
    for(let i=0;i<imgs.length;i++){
      if( imgs[i].complete !== true )
        return false;
    }
    return true;
  };

  const checkImages = function() {
    if( areAllImagesLoaded() ) {
      hideLoader();
      return;
    }
    window.setTimeout(checkImages, 250);
  }

  checkImages();


})();
#loader {
  background: red;
  font-size: 5em;
  position: fixed;
  top: 10vh;
  left: 10vw;
  height: 100px;
  width: 100px;
}
<div id="loader">
loading...
</div>

<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/500x100.png?text=Test+Image">
<img src="https://via.placeholder.com/400x100.png?text=Test+Image">
<img src="https://via.placeholder.com/300x100.png?text=Test+Image">
<img src="https://via.placeholder.com/700x100.png?text=Test+Image">
<img src="https://via.placeholder.com/650x100.png?text=Test+Image">
<img src="https://via.placeholder.com/550x100.png?text=Test+Image">
<img src="https://via.placeholder.com/450x100.png?text=Test+Image">
<img src="https://via.placeholder.com/350x100.png?text=Test+Image">
<img src="https://via.placeholder.com/250x100.png?text=Test+Image">
<img src="https://via.placeholder.com/730x100.png?text=Test+Image">
<img src="https://via.placeholder.com/735x100.png?text=Test+Image">
<img src="https://via.placeholder.com/630x100.png?text=Test+Image">
<img src="https://via.placeholder.com/530x100.png?text=Test+Image">
<img src="https://via.placeholder.com/430x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
<img src="https://via.placeholder.com/600x100.png?text=Test+Image">
JakeParis
  • 11,056
  • 3
  • 42
  • 65