隐藏内容加载 Gif答案

【问题标题】：Hide Content Loading Gif隐藏内容加载 Gif
【发布时间】：2011-07-25 18:58:02
【问题描述】：

我在一个页面的 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>

任何帮助将不胜感激！

【问题讨论】：

同意，我有时讨厌客户端代码

标签： javascript loading hidden gif

【解决方案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/

【讨论】：

该代码可以很容易地被 body/window.onload（或将脚本放在正文末尾）和document.getElementById("pic1").src = "http://nyquil.org/uploads/IndianHeadTestPattern16x9.png"; 取代。在 DOM 脚本成为负担的地方使用 jQuery，而不是在基本级别。
我就是喜欢jquery，什么都用它。我对 js 的“纯”实现不屑一顾。虽然你是对的

【解决方案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;}

【讨论】：