콘텐츠 숨기기로드 중 GIF

Question

로드하는 데 몇 초가 걸리는 페이지의 div에 두 개의 큰 이미지 파일이 있습니다. "loading gif"가 나타나는 동안 어떻게 로딩 콘텐츠를 숨기고 완전히로드 된 후에 콘텐츠를 보이게 할 수 있습니까?

자바 스크립트에 대해 아무 것도 모르지만이 코드를 사용해 보았습니다. 그것은 내가하고 싶었던 것의 절반을했습니다. "로딩 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와 코드 같은 : html로와

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

같은 :

<img id="pic1" /> 

그것은 문서의 준비 함수가 호출되는 (호출 될 때 실행하여 작동

후 DOM 및 기타 리소스 구성 되었다면) img의 src 속성에 원하는 이미지 URL을 할당합니다.
nyquil.org URL을 원하는 이미지로 변경하고 필요한만큼 추가하십시오 (외출하지 마세요). http://jsfiddle.net/mazzzzz/Rs8Y9/1/

Answer 2

당신은 모두가 onload 이벤트를 통해로드 한 경우에 대해 볼 수 있도록 내가 두 이미지에 대한 notifyLoaded 클래스를 추가하여 HTML 구조를 사용 : 테스트 파이어 폭스 3/크롬 여기에 10

데모입니다. 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를 : 나는 또한 이미지를로드 할 때 변경됩니다 기본 display:none;에 #Vertical를 설정 한

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

CSS : JS

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