Loader перед тем сайтом FadeIn

У меня есть этот пример код:Loader перед тем сайтом FadeIn

<!DOCTYPE html> 
<html> 
<head> 
<title>Example</title> 
<!-- This next would probably be in your main CSS file, but shown 
    inline here just for purposes of the example 
--> 
<style type="text/css"> 
body { 
    /* Hide it for nifty fade-in effect */ 
    display: none; 
} 
</style> 
<!-- Fallback for non-JavaScript people --> 
<noscript> 
<style type="text/css"> 
body { 
    /* Re-displays it by overriding the above */ 
    display: block; 
} 
</style> 
</noscript> 
</head> 
<body> 
...content... 
<script src="jquery.js"></script> 
<script> 
// This version runs the function *immediately* 
(function($) { 

$(window).load(function() { 
$(document.body).fadeIn(1000); 
}); 

})(jQuery); 
</script> 
</body> 
</html>

Как вы можете видеть, веб-страница, ждет, пока он загружен, а затем выцветает Но в некоторых случаях, некоторые пользователи могут иметь медленный интернет и могут. путайте веб-сайт, чтобы загрузить его. Я пытался искать jQuery или другие предварительные загрузчики, но никто не работает с моим кодом. Как я могу добавить небольшой, центрированный загрузочный gif к этому коду, чтобы пользователи знали, что веб-страница действительно загружается?

Кроме того, это связано с тем же веб-сайтом, поэтому я не хотел публиковать другой вопрос. Мой фон img изменяется случайным образом каждый раз, когда страница перезагружается. Код:

<script> 
$(document).ready(function(){ 

var upperLimit = 13; 

var randomNum = Math.floor((Math.random() * upperLimit) + 1);  


$("#banner").css("background-image","url('css/images/overlay.png'), url('images/" + randomNum + ".jpg')") 


}); 
</script>

Это прекрасно работает. Теперь, единственное, что я задавал себе вопрос, - как я могу заставить этот фон img затухать? Я не могу заставить его работать, добавляя .fadeIn (1000); к коду.

$("#banner").css("background-image","url('css/images/overlay.png'), url('images/" + randomNum + ".jpg')").fadeIn(1000);

Как я могу заставить его исчезать, так что он выглядит немного аккуратно?

источник

2014-11-04 Alex

Вы можете определить некоторый HTML для элемента загрузчика, а затем вытереть его, когда вы затухаете на странице.

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

Например:

<body> 
    <div id="loader"><img src="loading-image.png"></div> 
    <div id="page-content"> 
    <!-- content here --> 
    </div> 
</body>

Затем вы измените CSS и JS для обозначения #page-content вместо body.

Если вы затушевываете страницу, почему она также не угасает изображение баннера? Я думаю, вы можете обернуть это тем же механиком.

источник

2014-11-04 17:28:52

Видимо, он исчезнет, но баннер может появиться через пару секунд, не затухающий! И я не понимаю, почему – Alex

Было бы полезно, если бы вы могли воспроизвести проблему на http://jsfiddle.net/, чтобы мы могли более точно увидеть, что вы имеете в виду. –

Loader перед тем сайтом FadeIn

ответ

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