4

我从 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

4

4 回答 4

2

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

$(window).load(function(){
    //hide loader div here
    $("#loading-grid-page").hide();
});
于 2012-01-03T18:05:10.147 回答
2

我会这样做：

  1. 加载一个空页面并显示一个加载器。
    第一次加载该方法时，只需加载（y）图像，每个示例 12 就足够了。不要全部加载。

  2. 使用 (JQuery) Ajax 加载内容。

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

    链接到 jquery 的json 调用。链接到使用 PHP 解析 json。

  3. 隐藏装载机。

    隐藏包含加载程序的 div 并将链接添加到内容 div。

  4. 显示内容。

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

于 2012-01-03T18:05:46.257 回答
0

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

于 2012-01-03T18:06:26.490 回答
0

跟着这些步骤：

  1. 在body标签下面创建一个div
  2. 在头上包含 Ext Js 库作为脚本

  3. 创建一个脚本标签并在脚本标签内写下以下行

    var 掩码；function loadMask(el,flag,msg){ Mask= new Ext.LoadMask(Ext.get(el), {msg:msg}); if(flag) Mask.show(); 否则 Mask.hide(); }

  4. 在 body 标签上调用函数 beforeload 并调用你的函数 loadMask 如下 javascript:loadMask('myLoading',true,'Loading ...')

  5. 在 body 标签上调用函数 onload 并调用 javascript:loadMask('myLoading',false,'Loading ...')

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

function unloadMask(){ 
 Ext.util.CSS.createStyleSheet(".myloadingjs {\n visibility:hidden;  \n } ", "GoodParts");
}
于 2013-01-24T05:00:06.190 回答