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

我有一大堆图片被从Wordpress附件中提取，然后使用各种砖石网格倾倒在页面上 - 都很好。但是，这需要一点时间。页面加载时显示div（所有JS和HTML/CSS）

有没有什么办法可以在页面加载的时候显示带有文本的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; 
}

但是它抛出回不同的结果，有时它会等待所有的砌筑工程，有时它不并且砌体失败并且页面奇怪地加载。

，如果有别的那里只是想知道;）

感谢， [R

来源

2012-01-03 John the Painter

我会做这种方式：

加载一个空白页面，并显示终端一个装载机。
第一次当你加载方法只是加载（y）图像，每个例子12就足够了。不要加载全部。
使用（jQuery）Ajax加载内容。

使用ajax/json连接到服务器并计算剩余图像的数量（总计 - 显示）。如果（总数> 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。

来源

2012-01-03 18:05:46 thedethfox

嗯，任何进一步的帮助将是伟大的;）你可以看到这个想法在这里工作：http://goo.gl/jYMo9 - 但你也会看到它失败！感谢您一直以来的帮助！ – 2012-01-03 18:18:25

我看不到你的代码，所以我不会写任何代码，但我会尝试从网上给你一些例子。 – thedethfox 2012-01-04 07:58:10

这是jQuery的一个伟大的使用，如果你想代码时，页面加载运行，这样做：

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

来源

2012-01-03 18:05:10 box86rowh

我只需要在页面完全加载时显示内容，并在加载时显示＃loading-grid-page。你可以在这里看到我的尝试：http://goo.gl/jYMo9 - 感谢您的帮助:) – 2012-01-03 18:19:22

然后设置内容的可见性崩溃，并在加载功能将其设置为可见： $（“＃content” ）.css（“可见性”，“可见”）; – box86rowh 2012-01-03 19:30:51

不要使用display：none，因为在某些浏览器上，它不会加载内容。 – box86rowh 2012-01-03 19:31:42

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

来源

2012-01-03 18:06:26 imsky

隐藏覆盖图没有问题，它只是隐藏除覆盖层之外的所有内容，直到内容准备好并显示出来。 – 2012-01-03 18:20:19

没问题，然后隐藏内容并将其显示在domready上。 – imsky 2012-01-03 18:22:50

但是，如果JS被禁用，将不加载内容？或者你的意思是，用JS隐藏它？ – 2012-01-03 18:23:51

遵循以下步骤：

以下的body标签创建一个div像
包括的Ext JS库的头脚本
创造一个脚本标签，记下下面的脚本标签内线路

var Mask; function loadMask（el，flag，msg）Mask = new Ext.LoadMask（Ext.get（el），{msg：msg}）; if（flag） Mask.show（）; else Mask.hide（）; }
通话体标签功能beforeload和调用函数loadMask如下的javascript：loadMask（ 'myLoading'，真的， '正在载入'）对身体标记
通话功能的onload和调用JavaScript：loadMask（“myLoading”，虚假，“正在载入”）

如果第4步不能正常工作，然后创建下面的代码本功能写中的新功能unloadMask和和呼吁的onload事件此功能身体标签

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

来源

2013-01-24 05:00:06 siddmuk2005

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

回答

相关问题