如何在页面加载时显示 CSS 加载器？

【问题标题】：How to show CSS loader while page is loading?如何在页面加载时显示 CSS 加载器？
【发布时间】：2014-05-21 23:25:28
【问题描述】：

我正在尝试让 CSS 加载器在内容加载时显示在网站上。我正在使用这个工具来创建加载器：http://cssload.net/

我的一些页面确实有很多标签，并且必须先加载内容，然后用户才能与网站进行交互。我不知道我必须寻找什么才能让这个加载器出现。

我想我必须使用 .onload() JavaScript？

【问题讨论】：

标签： javascript loader

【解决方案1】：

您需要切换包含 gif 的图像标签的可见性。最初只是简单地显示图像，当页面加载时，隐藏图像。

示例演示：http://jsfiddle.net/GCu2D/140/

$(document).ready(function () {
    $('a').click(function(){
        $('img').toggle();
        return false;
    })
});

这是一个 jQuery 代码，尽管您可以在 javascript 中执行相同的操作。通过将display相应地设置为none或block。

【讨论】：

【解决方案2】：

将加载器放在页面上所有其他元素的顶部，并给它一个id'loader'，然后试试这个：

document.addEventListener('DOMContentLoaded', onReady, false);
function onReady()
{
    var loader = document.getElementById('loader');
    loader.style.display = 'none';
}

注意：这在 IE 中不起作用

【讨论】：