Question

我在页面上的div中有两个大图像文件需要几秒钟才能加载。如何在显示“加载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>

非常感谢任何帮助！

Answer 1

使用jquery，代码如下：

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

使用html：

<img id="pic1" />

它的工作方式是调用文档的ready函数（在构建DOM和其他资源之后调用），然后它将为img的src属性分配你想要的图像的url。
将nyquil.org网址更改为您想要的图像，并添加所需数量（只是不要过分;）。测试了Firefox 3 / chrome 10.

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

Answer 2

使用HTML结构我为这两个图片添加了一个notifyLoaded类，以便您可以通过onload事件查看这两个图像的加载时间。由于css背景图像没有得到那个事件我使用背景的路径创建了一个隐藏的图像，所以我们可以测试该图像的加载时间

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

隐藏内容加载Gif

2 个答案: