Voici comment afficher du contenu (texte, HTML, JS, CSS ou tout autre contenu) dans un bloc DIV, après un délai que vous aurez préalablement défini, le tout en JavaScript.
C’est écrit en JavaScript pur (vanilla JavaScript), c’est-à-dire sans librairies supplémentaires, et donc compatible avec tous les navigateurs. On utilise innerHTML pour faire apparaître la div après le délai imparti.
Exemple de contenu affiché après un délai
Le texte suivant apparaît 7 secondes après le chargement de la page :
Le code : afficher le contenu d’une DIV après un délai
Voici le style CSS à placer dans l’entête de la page (HEAD) :
.centered {
margin:0 auto;
text-align:center;
}Code language: CSS (css)Et voici le contenu HTML à placer dans le corps de la page (BODY):
<div id="example_div" class="centered"> </div>Code language: HTML, XML (xml)Ainsi que le code JavaScript qui s’occupe du délai:
/*
|-----------------------------------------------------------------------
| Delayed DIV text in vanilla JavaScript by Matt
| URL : https://www.skyminds.net
|-----------------------------------------------------------------------
|
| Returns predefined text in a DIV after a delay.
|
*/
(function(){
var element_id = 'example_div' ; /* name of div ID w/ delayed text */
var delayed_text = "Ceci est un texte d'illustration pour tester l'affichage d'un bloc DIV après un délai défini.";
var time = 7; /* time in seconds until display */
setTimeout(function(){
document.getElementById(element_id).innerHTML = delayed_text;},time*1000);
})();Code language: JavaScript (javascript)Fonctionnement du script
Voici comment fonctionne le script : on recherche le bloc DIV qui possède l’identifiant #exemple_div et on lui injecte le contenu de la variable delayed_text après le délai en secondes défini dans la variable time.
delayed_text.Simple et efficace.
Vous voulez un site WordPress ou WooCommerce qui soit à la fois rapide et performant? Vous êtes au bon endroit.
