Sujet Précédent Sujet Suivant

Image au chargement d'une page web

Résolu
Kelsilver - 13 janv. 2017 à 22:30
 Messan - 19 janv. 2017 à 18:50
Bonjour,
J'ai créé une page. Le contenu de cette page est lourd. Ce qui fait que son affichage est très lente.
Ma question est : je veux mettre une image qui va s'afficher sur la page au moment où cette est entrain de se charger. Et que cette image disparaisse après le changement de cette page.
Comment faire cela?
Merci d'avance

3 réponses

Réponse 1 / 3
jordane45 Messages postés 37515 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 mai 2023 341
13 janv. 2017 à 22:33
Bonjour
Tu le génére comment le contenu de ta page ?

0
Réponse 2 / 3
Sonny04 Messages postés 8 Date d'inscription jeudi 19 janvier 2017 Statut Membre Dernière intervention 19 janvier 2017
19 janv. 2017 à 11:45
Bonjour ,
L'element de style "display" permet de choisir si un element est affiché ou non.

Donne un id à l'image que tu souhaites afficher. Puis quand ta page est chargée,( à toi de choisir à quel endroit ça correspond dans ton code, comme à la fin d'une promesse par exemple) insère :
<<
document.getElementById('TonID').style.display = 'none'
>>

Et ton image ne sera plus affichée !
0
Réponse 3 / 3
Messan
Modifié par @karamel le 23/01/2017 à 10:51
BoBonjour,
Merci d'avance
J'ai compris ce que vous avez dit.
D'après mes recherches sur internet, j'ai trouvé ce code qui m'a sauvé : 
<html>
     <head>
    <script src=""quot;"quot;http://code.jquery.com/jquery-1.4.2.min.js" /></script>
    <script>
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          if (oldonload) {
            oldonload();
          }
          func();
        }
      }
    }
    addLoadEvent(function() {
        $("#loading").fadeOut(1000);
    });
    /*
    $(document).ready(function() {
            $("#nav").fadeIn(3000);
            $("#main").fadeIn(3000);
    });


*/
</script>
    <style>
    #loading {
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.8;
        filter:alpha(opacity=80);
        position:fixed;
        text-align: center;
        color:#FFF;
    }
    </style>
     </head>
     <body>
         <div id="loading"><br><br>Please wait...</div>
     </body>
</html>
0
Rejoignez-nous