隱藏內容加載Gif

我在一個頁面上的div中有兩個大圖像文件需要幾秒鐘加載。如何在「加載gif」出現時隱藏加載內容，然後在完全加載後顯示內容？隱藏內容加載Gif

我真的不知道關於JavaScript的任何內容，但我嘗試使用此代碼。它做了我希望它做的一半。「加載GIF」的工作，但問題是內容是可見的，因爲它正在加載。

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

任何幫助將不勝感激！

來源

2011-03-30 Aaron Graham

是js的灼傷我的眼睛 – MikeM 2011-03-30 03:35:47

同意，我討厭客戶端代碼有時候 – Ben 2011-03-30 03:38:20

使用jQuery，下面類似的代碼：

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

與HTML類似：

<img id="pic1" />

它的工作方式運行時，文件的準備函數被調用（這被稱爲後，DOM和其他資源已被構建），那麼它將爲圖像的url分配img的src屬性。
將nyquil.org網址更改爲您想要的圖片，並根據需要添加儘可能多的圖片（只是不要過度;）。經測試火狐3 /鉻10

以下是演示：http://jsfiddle.net/mazzzzz/Rs8Y9/1/

來源

2011-03-30 03:38:00 Ben

這段代碼可能很容易被body/window.onload取代（或者把腳本放在body的末尾）和'document.getElementById（「pic1」）。src =「http://nyquil.org/uploads/IndianHeadTestPattern16x9.png」;'。在DOM腳本成爲負擔的情況下使用jQuery，而不是在基本級別。 – 2011-03-30 04:11:55

我只是喜歡jQuery，並將其用於一切。我已經冷落了js「純粹」的實現。雖然你是正確的 – Ben 2011-03-30 04:19:31

諷刺+1 jQuery純度 – Nathan 2011-03-30 19:29:11

工作了你的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;}

來源

2011-03-30 04:35:23 MikeM

隱藏內容加載Gif

回答

相關問題