gpt4 book ai didi

javascript - 在页面加载时显示 div(所有 JS 和 HTML/CSS)

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:50:14 27 4
gpt4 key购买 nike

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

有没有办法在页面加载时显示带有一些文本的 div,然后显示:无,之后?

到目前为止我有这个:

<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

最佳答案

我会这样做:

  1. 加载一个空页面并显示一个加载程序。
    第一次加载方法时,只需加载 (y) 个图像,每个示例 12 个就足够了。不要加载所有这些。
  2. 使用 (JQuery) Ajax 加载内容。

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

    链接到 jquery 的 json call .链接到 parsing json using PHP .

  3. 隐藏装载机。

    Hide the div that contain the loader and add the links to the content div.

  4. 显示内容。

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

关于javascript - 在页面加载时显示 div(所有 JS 和 HTML/CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8716623/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com