La façon la plus simple de le faire serait de superposer - un <div> absolument positionné qui couvre toute la page et qui a un z-index élevé. Une fois le chargement de votre page terminé (c'est-à-dire les incendies d'événement loaded), vous pouvez supprimer le <div>.
Un exemple grossier à des fins de style:
<html>
<head>
<style type="text/css">
#loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.7; }
#loading-message { position: absolute; width: 400px; height: 100px; line-height: 100px; background-color: #fff; text-align: center; font-size: 1.2em; left: 50%; top: 50%; margin-left: -200px; margin-top: -50px; }
</style>
</head>
<body>
<div id="loading-overlay"></div>
<div id="loading-message">Loading page, please wait...</div>
<!-- rest of page -->
<p>The rest of the page goes here...</p>
</body>
</html>
Soyez conscients que les contrôles peuvent avoir leur propre événement « chargé » (par exemple <img> balises font), qui peut tirer après que la page a complètement terminé. Vous devriez expérimenter pour être certain.
Ergh ... Réalisez-vous ce que vous essayez de faire pour vos utilisateurs? (Humph, désolé, mais ne pouvait pas résister: Je ne reviendrai pas à un site Web qui fait cela!) –
Que faire si la connexion à une image minuscule échoue? La page entière ne serait pas utilisable à cause de cette petite image. – Gumbo
Martin, je suppose que quelque chose est idiot de ma part. Pouvez-vous s'il vous plaît suggérer la meilleure approche? – RKh