Question

我有一大堆图像从Wordpress附件中提取出来，然后使用砖石网格排在页面上 - 一切都很好。但是，这需要一点时间。

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

到目前为止，我有这个：

<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

Answer 1

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

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

Answer 2

我会这样做：

加载空白页面并显示加载程序。
第一次加载方法时只需加载（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，或者使用现有的div，但这取决于你实现代码的方式，我再推荐JQuery。

Answer 3

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

Answer 4

请按照以下步骤操作：

创建一个Div就像下面的body标签一样
在头上包含Ext Js库作为脚本
创建一个脚本标记并在脚本标记
中写下以下行
var Mask; function loadMask（el，flag，msg）{ Mask = new Ext.LoadMask（Ext.get（el），{msg：msg}）; 如果（标志） Mask.show（）; 其他 Mask.hide（）; }
在body标签上调用函数beforeload并调用你的函数loadMask，如下所示 javascript：loadMask（'myLoading'，true，'正在加载...'）
在body标签上调用函数onload并调用javascript：loadMask（'myLoading'，false，'Loading ...'）

如果步骤4不工作则创建一个新函数unloadMask并在此函数内写下代码并在onload of body标签上调用此函数

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

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

4 个答案: