隐藏内容加载 GIF

Question

我在页面的 div 中有两个大图像文件，需要几秒钟才能加载。如何在出现“正在加载 gif”时隐藏正在加载的内容，然后在完全加载后显示该内容？

我对javascript一无所知，但我尝试使用这段代码。它完成了我想要它完成的一半任务。 “正在加载 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" />

它的工作原理是在调用文档的ready函数时运行（在构建DOM和其他资源之后调用），然后它将使用您设置的图像的url分配img的src属性想要。
将 nyquil.org 网址更改为您想要的图像，并根据需要添加尽可能多的图像（只是不要过度；）。已测试 Firefox 3/chrome 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;}