Masquer le contenu Chargement Gif

Question

J'ai deux grands fichiers image dans un div sur une page qui prend plusieurs secondes à charger. Comment puis-je cacher le contenu de chargement pendant qu'un "gif de chargement" apparaît et que le contenu apparaisse une fois qu'il est complètement chargé?

Je ne connais pas vraiment le javascript mais j'ai essayé d'utiliser ce code. Il a fait la moitié de ce que je voulais qu'il fasse. Le "chargement gif" a fonctionné mais le problème était que le contenu était visible pendant le chargement.

http://aaron-graham.com/test2.html

<div id="loading" style="position:absolute; width:95%; text-align:center; top:300px;"> 
     <img src="img/parallax/ajax-loader.gif" border=0> 
</div> 
    <script> 
     var ld=(document.all); 
     var ns4=document.layers; 
     var ns6=document.getElementById&&!document.all; 
     var ie4=document.all; 
     if (ns4) 
     ld=document.loading; 
     else if (ns6) 
     ld=document.getElementById("loading").style; 
     else if (ie4) 
     ld=document.all.loading.style; 
     function init() 
     { 
     if(ns4){ld.visibility="hidden";} 
     else if (ns6||ie4) ld.display="none"; 
     } 
    </script> 

Toute aide serait grandement appréciée!

Answer 1

Utilisez jquery, avec le code comme:

$(document).ready(function(){ 
    $('#pic1').attr('src','http://nyquil.org/uploads/IndianHeadTestPattern16x9.png'); 
}); 

Avec le code html comme:

<img id="pic1" /> 

Il fonctionne en cours d'exécution lorsque la fonction prêt de document est appelé (qui est appelée après les ressources DOM et autres ont été construits), alors il assignera l'attribut src de l'img avec l'URL de l'image que vous voulez.
Remplacez l'URL de nyquil.org par l'image que vous voulez, et ajoutez-en autant que nécessaire (ne passez tout simplement pas par dessus bord). Testé Firefox 3/chrome 10.

Voici la démo: http://jsfiddle.net/mazzzzz/Rs8Y9/1/

Answer 2

Travailler votre structure HTML j'ai ajouté une classe notifyLoaded pour les deux images afin que vous puissiez regarder quand les deux ont chargé par un événement onload. Depuis les images de fond css ne reçoivent pas cet événement que j'ai créé un img caché en utilisant le chemin de l'arrière-plan afin que nous puissions tester lorsque cette image est chargée

HTML:

<div id="loading"> 
     <img src="http://aaron-graham.com/img/parallax/ajax-loader.gif" border="0" /> 
    </div> 

    <div id="vertical"> 
     <div> 
      <div class="panel"> 
       <img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/tile3.png" /> 
      </div> 
     </div> 
    </div> 

    <div id="imgLoader"> 
     <img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/deepspace3.jpg" alt="" /> 
    </div> 

Vous avez référence à jQuery dans votre page déjà, donc j'ai remplacé votre script à ce qui suit.

jQuery:

$(document).ready(function() { 
    var $vertical = $('#vertical'); 
    var $imgs = $('.notifyLoaded'); 
    var imgCount = $imgs.length; 
    var imgLoadedCount = 0; 

    $vertical.backgroundparallax(); // Activate BG Parallax plugin 

    $imgs.load(function() { 
     console.log(this); 
     imgLoadedCount++; 
     if (imgCount == imgLoadedCount) { 
      // images are loaded and ready to display 
      $vertical.show(); 
      // hide loading animation 
      $('#loading').hide(); 
     } 
    }); 
}); 

J'ai aussi mis #Vertical à un défaut display:none; qui obtient changé lorsque les images ont chargé

CSS:

body {background-color:black;} 
#loading {position:absolute;width:95%;text-align:center;top:300px;} 
#vertical {display:none;background-image: url('http://aaron-graham.com/img/parallax/deepspace3.jpg');background-position: 0 0;height: 650px;width: 900px;overflow: auto;margin:35px auto auto auto;} 
#vertical > div {margin: 0;color: White;} 
#vertical .panel {padding: 100px 5%;margin-left:40px;height: 3363px;} 
#imgLoader {display:none;}