隐藏内容加载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

回答

相关问题