显示加载器元素直到页面加载，然后隐藏它
[英]Show loader element until page loads, then hide it
问题描述
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" >加载器在<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>👉.</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>👉.</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>👉.</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>👉:</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  , :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  , :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 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  . .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!我已经尝试了一些查询代码，但对我没有任何作用请提前帮助和感谢！
1 个解决方案
解决方案1
0 2020-06-03 18:10:10
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.好吧，页面加载时会在文档上触发DOMContentLoaded事件，因此您可以尝试这样做，但这并不一定意味着所有图像都已加载。
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.如果您想知道页面上的所有图像何时加载，您可以在页面的最后尝试：这将获取页面上的所有图像并检查它们的complete属性。 It continues to check it until they're all set to true.它会继续检查它，直到它们都设置为 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">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
显示加载图标，直到页面加载其第一个元素 - Show a loading icon until the page loads its first element
Vuetify：在元素加载后隐藏骨架加载器 - Vuetify: Hide a skeleton loader after a element loads
隐藏html输入元素，直到javascript加载为止 - Hide html input element until javascript loads
从父页面隐藏表单，直到加载特定的iframe元素ID - Hide form from parent page until specific iframe element ID loads
jQuery显示隐藏的加载器单击的元素 - jquery show hide loader for the element which clicked
页面加载时显示和隐藏微调器 - Show and hide spinner when the page loads
如何将隐藏/显示事件延迟到提交后Iframe加载 - How to delay Hide/Show events until Iframe loads after a submit
隐藏Ajax Div和显示Loader Div，直到返回数据 - Hide Ajax Div and Show Loader Div until data is returned
如何在页面缓慢加载时显示加载程序图像 - How to show a loader image while a page loads slowly
如何使BxSlider隐藏所有幻灯片，直到页面加载 - How to make BxSlider hide all slides until the page loads
相关标签