2012-05-08 5 views
-1

Я ищу функцию javascript, которая будет задерживаться тело веб-страницы для загрузки, я хочу, чтобы он отображал мой html-фон на 1 или 2 секунды, а затем отображал содержимое тела. нужна помощь. СпасибоJavascript - Как сделать всплывающее окно?

+4

Поместите содержимое внутри огромного div. Сделайте это скрытым по умолчанию. Покажите это через 2 секунды после загрузки страницы. –

+0

Я предполагаю, что код @pst говорил о чем-то вроде этого: 'onload = setTimeout (function() {document.getElementById (" bigDiv "). Display =" block ";}, 2000);" ' – JNF

+0

Вы имеете в виду: 'document.getElementById (" bigDiv "). style.display = ''', но, вероятно, лучше использовать 'style.visibility'. Независимо от того, они оба будут раздражать. – RobG

ответ

0

вы не можете остановить загрузку страницы. но вы можете принудительно заставку на не скрывая основной контейнер вашего контента до указанного времени ..

<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> 
0

Вы не можете задержать загрузку вашего содержимого тела, но вы можете поместить DIV поверх вашего (используя абсолютное позиционирование и z-индекс), который отображается поверх него и скрывает ваш контент до тех пор, пока ваши две секунды не будут выполнены, а затем вы можете скрыть оверлейный div.

Вот рабочий пример: http://jsfiddle.net/jfriend00/Ru6tk/, где вы можете увидеть HTML, CSS и javascript.

Или вы можете разместить содержимое своего основного тела внутри своего собственного div и установить его как display: none с помощью начального CSS, а затем любое другое содержимое будет отображаться первым, а затем через две секунды вы можете показать свой главный div и скрыть другой div, тем самым скрывая фон и показывая ваш основной контент.

2

Вы можете использовать функцию .delay() в JQuery (я использую Jquery 1.7.1 версии), как на примере ниже:

$(selector).delay(2000).fadeIn("slow"); 
0

следующие действия

1) положить DIV на верхней части вашего контента и установить его CSS свойству дисплей: нет как

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

2) теперь на тело тега вашей страницы добавить функцию OnLoad как

<body onload="displaypage()">; 

3) Теперь добавьте скрипт под тег тела как

<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>; 



живой пример

<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> 
Смежные вопросы