0

我正在寻找一个 javascript 函数，它会延迟网页正文加载，我希望它显示我的 html 背景 1 或 2 秒，然后显示正文内容。需要帮忙。谢谢

4

5 回答 5

3

您可以在 jquery 中使用 .delay() 函数（我使用的是 Jquery 1.7.1 版本），如下例所示：

 $(selector).delay(2000).fadeIn("slow");
于 2012-05-08T07:50:45.370 回答
1

follow these steps

1) put a div on top of your content and set it css property display:none like 

<body>
<div id="wrapperdiv" style="display:none;">
......<br/>
&lt;/div&gt;
&lt;/body&gt;
<br/>

2) now on body tag of your page add a onload function like

 <body onload="displaypage()">;

3) Now add script under body tag like 

<script type="text/javascript">;
function displaypage()
{<br/>
var t=setTimeout("displaydiv()",3000);//Number of seconds *1000, Currently its **3** seconds 
}
function displaydiv()
{
document.getElementById("wrapperdiv").style.display='block';
}    
</script>;



Live Example 

<html>
<head>
<title>Test Delay Display Page By IuR</title>
</head>
<body onload="displaypage()">
<script type="text/javascript">
function displaypage()<br/>
{
var t=setTimeout("displaydiv()",3000);// it will Delay for 3 seconds
}

function displaydiv()
{
document.getElementById("wrapperdiv").style.display='block';
}

</script>
<div id="wrapperdiv" style="display:none;height:500px;width:300px;background-color:red;">
</div>

</body>
</html>
于 2012-05-08T08:22:40.283 回答
1

您不能延迟加载正文内容，但是您可以在内容顶部放置一个 div（使用绝对定位和 z-index），该 div 显示在其顶部并隐藏您的内容，直到您运行两秒钟并且然后你可以隐藏覆盖 div。

这是一个工作示例： http: //jsfiddle.net/jfriend00/Ru6tk/，您可以在其中看到 HTML、CSS 和 javascript。

或者，您可以将您的主体内容放在它自己的 div 中，并将该 div 设置为display: none通过初始 CSS，然后首先显示任何其他内容，然后在两秒钟后，您可以显示您的主 div 并隐藏其他 div 因此隐藏背景并显示您的主要内容。

于 2012-05-08T06:14:40.203 回答
1

你不能停止页面加载。但是您可以通过隐藏内容的主容器直到指定时间来强制启动闪屏。

<div id="bg">
  <div id="container" style="display:none">
  -- your content goes here -- 
  </div>
</div>
<script type="text/javascript">
// use setTimeout to show #container
</script>
于 2012-05-08T05:57:51.150 回答
0

这在其他地方作为临时警报发布，但我也将其用作启动屏幕。样式设置使它在页面上居中，并使文本居中。

function alertTimeout(mymsg,mymsecs)
{
 var myelement = document.createElement("div");
myelement.setAttribute("style","background-color: grey;color:black; width: 450px;height: 200px;position: absolute;top:0;bottom:0;left:0;right:0;margin:auto;border: 4px solid black;font-family:arial;font-size:25px;font-weight:bold;display: flex; align-items: center; justify-content: center; text-align: center;");
 myelement.innerHTML = mymsg;
 setTimeout(function(){
  myelement.parentNode.removeChild(myelement);
 },mymsecs);
 document.body.appendChild(myelement);
}

致电：

alertTimeout("Splash 1.0<br>This is a splash<br>Thank you for watching",5000)
于 2019-12-21T01:05:25.907 回答