页面加载时显示 div（所有 JS 和 HTML/CSS）答案

【问题标题】：Display div while page loads (all JS and HTML/CSS)页面加载时显示 div（所有 JS 和 HTML/CSS）
【发布时间】：2012-01-03 18:01:33
【问题描述】：

我从 Wordpress 附件中提取了大量图像，然后使用各种砌体网格将其转储到页面上 - 一切都很好。但是，这需要一点时间。

有没有办法在页面加载时显示一个带有一些文本的 div，然后显示：none，after？

到目前为止我有这个：

<script type="text/javascript">
function showContent(){
//hide loading status...
document.getElementById("loading-grid-page").style.display='none';

//show content
document.getElementById("content").style.display='block';
}
</script>
</head>
<body onload="showContent()">
<script type="text/javascript">
document.write('<div id="loading-grid-page">Fetching ALL the gold...</div>');
</script>
<div id="content">
<script type="text/javascript">
//hide content
document.getElementById("content").style.display='none';
</script>

还有我的 CSS，

#loading-grid-page {
color: #ffffff;
font: 700 11px/25px 'proxima-nova-1', 'proxima-nova-2', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
background: #111111 url('images/ajax-loader-black.gif') no-repeat 15px center;
border-radius: 2px;
border: 1px solid #111111;
padding: 5px 30px;
text-align: center;
width: 200px;
position: fixed;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -100px;
z-index: 1000000;
}

但是它会返回混合结果，有时它会等待并且所有砌体都正常工作，有时它不会并且砌体失败并且页面加载异常。

只是想知道那里是否还有其他东西;）

谢谢，回复

【问题讨论】：

标签： javascript jquery load jquery-masonry

【解决方案1】：

我会这样做：

加载一个空白页面并显示一个加载器。
第一次加载该方法时，只需加载（y）图像，每个示例 12 就足够了。不要全部加载。
使用 (JQuery) Ajax 加载内容。

使用 ajax/json 连接服务器并统计剩余图像数量（总数 - 显示）。 if (total > 0) 然后将这些图像的链接作为 json 数组返回。

链接到 jquery 的json call。链接到parsing json using PHP。
隐藏加载器。

Hide the div that contain the loader and add the links to the content div.
显示内容。

这里有两个选项附加一个 div，或者使用一个现有的，但这取决于你实现代码的方式，我再次推荐 JQuery。

【讨论】：

嗯，任何进一步的帮助都会很棒;) 你可以在这里看到这个想法：goo.gl/jYMo9 - 但你也会看到它失败了！感谢您迄今为止的帮助！
我看不到你的代码，所以我不会写任何代码，但我会试着给你一些来自网络的例子。

【解决方案2】：

这是 JQuery 的一大用途，如果您希望代码在页面加载时运行，请执行以下操作：

$(window).load(function(){
    //hide loader div here
    $("#loading-grid-page").hide();
});

【讨论】：

我只需要在页面完全加载时显示内容，并在加载时显示#loading-grid-page。您可以在这里看到我的尝试：goo.gl/jYMo9 - 感谢您的帮助 :)
然后将内容的可见性设置为折叠，并在加载函数中将其设置为可见性：$("#content").css("visibility", "visible");
不要使用 display: none，因为在某些浏览器上，它不会加载内容。

【解决方案3】：

当 DOM 准备好时，您可以使用 ded 的 domready 事件隐藏叠加层。

【讨论】：

隐藏叠加层很好，它实际上是隐藏除叠加层之外的整个内容，直到内容准备好然后显示它。
没问题，然后隐藏内容并在domready上显示。
但是如果禁用了JS，就不会加载任何内容？或者你的意思是，也用 JS 隐藏？
不清楚您的页面是如何设置的。如果您有 jQuery，并且如果您的内容是动态加载的，那么无论如何如果没有 JS，它将无法工作。在这种情况下，您应该只使用 imagesLoaded 和 jQuery 的标准 .ready 事件之类的东西。如果您的内容不是动态加载的，那么您应该单独使用 .ready 来显示内容，并在加载时立即使用 jQuery 隐藏它。

【解决方案4】：

按照以下步骤操作：

在body标签下面创建一个Div
在头上包含 Ext Js 库作为脚本
创建一个脚本标签并在脚本标签内写下以下行

var 掩码；函数 loadMask(el,flag,msg){ 掩码=新的 Ext.LoadMask(Ext.get(el), {msg:msg}); 如果（标志）掩码.show(); 别的掩码.hide(); }
在 body 标签上调用函数 beforeload 并调用你的函数 loadMask 如下 javascript:loadMask('myLoading',true,'Loading ...')
在body标签上调用函数onload并调用javascript:loadMask('myLoading',false,'Loading ...')

如果第 4 步不起作用，则创建一个新函数 unloadMask 并在此函数中编写以下代码并在加载正文标记时调用此函数

function unloadMask(){ 
 Ext.util.CSS.createStyleSheet(".myloadingjs {\n visibility:hidden;  \n } ", "GoodParts");
}

【讨论】：