Отображение загрузки gif за 5 секунд автоматически

Я хочу автоматически отображать загрузку gif, когда пользователь переходит на сайт, а затем через 5 секунд он уходит.Отображение загрузки gif за 5 секунд автоматически

Я нашел этот скрипт, который делает то, что я хочу, но он не делает это автоматически. Пользователь должен щелкнуть по кнопке, чтобы запустить ее, которая побеждает цель.

<input type = "button" value = "Show image for 5 seconds" onclick = "show()"><br><br> 
<div id = "myDiv" style="display:none"><img id = "myImage" src = "images/ajax-loader.gif"></div><br> 

<script type = "text/javascript"> 

function show() { 
    document.getElementById("myDiv").style.display="block"; 
    setTimeout("hide()", 5000); // 5 seconds 
} 

function hide() { 
    document.getElementById("myDiv").style.display="none"; 
} 

</script>

Вы можете увидеть его here.

Если есть способ, которым я могу это сделать, или если есть лучший способ сделать это, просто прокомментируйте.

источник

2011-12-23 connor.p

[tag: javascript] *** не *** [tag: java]. –

извините, не знал, им все еще новичок во всем –

Просто удалите onclick="show()" и добавьте show(); в качестве последней строки вашего блока JavaScript.

Кроме того, как я чувствителен к global namespace pollution, я бы сделал это так:

<script type="text/javascript"> 

    (function(){ 
    var myDiv = document.getElementById("myDiv"), 

     show = function(){ 
     myDiv.style.display = "block"; 
     setTimeout(hide, 5000); // 5 seconds 
     }, 

     hide = function(){ 
     myDiv.style.display = "none"; 
     }; 

    show(); 
    })(); 

</script>

источник

2011-12-23 16:51:57 ziesemer

Помните, что если он загружает это в начале страницы, его divs не существуют в dom. Лучше всего делать это при загрузке страницы. –

Большое спасибо, что отлично работает –

@ DominicGreen - согласился, но это будет работать с образцом, который он показал. В противном случае я бы назвал все это чем-то вроде 'jQuery.ready()'. – ziesemer

Вы пробовали window.onload?

Что-то вдоль линий:

<body onload="show();"> 
..snip 
</body>

источник

2011-12-23 16:53:21

сейчас у меня нет, я никогда не слышал об этом, может быть, стоит посмотреть в –

Добавить window.onload = show; в конце сценария, и он покажет загрузчик, как только завершения загрузки страницы. Вы захотите использовать это событие для всего, что вы хотите сделать, когда пользователь откроет страницу, так как она гарантирует, что вся страница доступна, прежде чем пытаться манипулировать элементами на странице.

источник

2011-12-23 16:53:55 Hal

Вы можете просто удалить display: none; из myDiv. Таким образом, это будет видно с самого начала, а затем вы спрячете его через пять секунд.

Нет необходимости сначала скрыть его с помощью CSS, а затем отобразить его с помощью JavaScript, если вы хотите, чтобы он появился с самого начала.

<input type = "button" value = "Show image for 5 seconds" onclick = "show()"><br><br> 
<div id = "myDiv"><img id = "myImage" src = "images/ajax-loader.gif"></div><br> 

<script type = "text/javascript"> 
setTimeout(function(){ 
    document.getElementById("myDiv").style.display="none"; 
}, 5000); 
</script>

источник

2011-12-23 16:54:13

Что делать, если у пользователя отключен Javascript? Затем вы покажете им анимацию загрузки, а затем сценарий никогда не удалит ее. – Hal

@harrison_m Действительная точка, +1! –

Поместите это сразу после <body>

<div id="myDiv"><img id="myImage" src="images/ajax-loader.gif"></div> 
<script> 
    setTimeout('document.getElementById("myDiv").style.display="none"', 5000); // 5 seconds 
</script>

источник

2011-12-23 16:55:14

Избавиться от изображения в style="display:none" так, что изображение появляется по умолчанию. Другие говорят вам сначала позвонить show(), но это совершенно не нужно. Вам не нужно использовать JavaScript для первоначального отображения изображения; просто пусть он будет отображаться сам по себе. Затем удалите его через 5 секунд:

<div id = "myDiv"><img id = "myImage" src = "images/ajax-loader.gif"></div><br> 

<script type = "text/javascript"> 
    setTimeout(function() { 
     document.getElementById("myDiv").style.display="none"; 
    }, 5000); // 5 seconds 
</script>

источник

2011-12-23 16:59:40

Отображение загрузки gif за 5 секунд автоматически

ответ

Смежные вопросы