Jquery Fade при загрузке содержимого страницы - PullRequest
Новая
       6

Jquery Fade при загрузке содержимого страницы

2 голосов
/ 01 февраля 2010

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

Как вы можете видеть, когда вы загружаете или обновляете страницу, появляется фоновый цвет, а когда все заканчивается, jquery затухает. Мой сайт: http://www.vitaminjdesign.com

Есть идеи, как это сделать?

Ответы [ 2 ]

4 голосов
/ 01 февраля 2010

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

#mask {
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    background-color:red; 
    z-index:99;
}

И HTML: 

<HTML>
<HEAD>
<TITLE>Mask Example</TITLE>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<SCRIPT type="text/javascript">
$(window).load(function () {
    $('#mask').fadeOut('slow');
});
</SCRIPT>
</HEAD>
<BODY>
<P>Some text goes here</P>
<IMG src="http://spaceflight.nasa.gov/gallery/images/shuttle/sts-119/hires/s119e008352.jpg" />
<P>And moar text!!</P>
<DIV id="mask"></DIV>
</BODY>
</HTML>

Работа с непрозрачностью тела обычно считается плохой практикой и может не поддерживаться полностью в некоторых браузерах.

0 голосов
/ 01 февраля 2010

Поместите это в свой файл CSS (или прямо в тег body): 

body {
    display: none;
}

И JS должен быть (в head или body): 

<script type="text/javascript">
    $(window).load(function() {
        $('body').fadeIn()
    })
</script>

Функция запускается при загрузке всего содержимого документа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...