Скрыть содержимое Загрузка Gif

Question

У меня есть два больших файла изображения в div на странице, которые загружаются за несколько секунд. Как я могу скрыть загружаемый контент, когда появляется «загрузка gif», а затем появляется содержимое после его полной загрузки?

Я не знаю ничего о javascript, но я пробовал использовать этот код. Это сделало половину того, что я хотел этого сделать. «Loading gif» работал, но проблема заключалась в том, что содержимое было видно по мере загрузки.

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> 

Любая помощь будет принята с благодарностью!

Answer 1

Использование JQuery, с кодом, как:

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

С HTML, как:

<img id="pic1" /> 

Он работает, работает, когда готова функция документа называется (который вызывается после того, DOM и другие ресурсы были построены), то он присваивает атрибуту src img URL-адрес изображения, который вы хотите.
Измените URL-адрес nyquil.org на нужное изображение и добавьте столько, сколько необходимо (просто не переходите за борт;). Испытано Firefox 3/хром 10.

Вот демо: http://jsfiddle.net/mazzzzz/Rs8Y9/1/

Answer 2

Отработки вашей HTML структуру Я добавил notifyLoaded класс для двух изображений, так что вы можете наблюдать, когда оба загружены через onload события. Поскольку CSS фоновые изображения не получить это событие, я создал скрытый IMG, используя путь фона оставался, чтобы мы могли проверить, когда это изображение загружается

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> 

У вас есть ссылки на JQuery в вашем страницы, поэтому я заменил ваш скрипт следующим.

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(); 
     } 
    }); 
}); 

Я также установить #Vertical к дефолту display:none;, который получает изменилось, когда изображения загружены

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;}