fadeIn с использованием $ (document) .ready (), вызывающее заметное отставание - PullRequest
Новая
       8

fadeIn с использованием $ (document) .ready (), вызывающее заметное отставание

3 голосов
/ 13 декабря 2011

Я относительно новичок в javascript и создаю веб-страницу.Я использую слайд-шоу Pikachoose в качестве баннера на странице, и я не смог найти способ заставить его исчезать при загрузке.Когда страница загружается, первое изображение слайд-шоу просто загружается прямо вверх, а не исчезает.

Я решил просто использовать javascript-функцию fadeIn во всем слайд-шоу.Вот мой javascript: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pikachoose.js"></script>
<script language="javascript">
    $(document).ready(function (){
        $('#slideshow').hide().fadeIn(1500);
        $("#pikame").PikaChoose();
    });
</script>

Так что в основном он исчезает, а затем запускается Pikachoose.НО есть заметное отставание на затухании при загрузке страницы.Это работает, но немного изменчиво.После загрузки слайд-шоу работает без проблем.Есть ли способ немного задержать исчезновение, пока вся страница не загрузится, чтобы она не была связана?Я думал, что это то, что готовая функция выполнила, хотя.

Почему вы думаете, что это происходит?Есть идеи?Спасибо.

РЕДАКТИРОВАТЬ

Вот полный код: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pikachoose.js"></script>
<script language="javascript">
    $(document).ready(function (){
            $('#slideshow').hide().fadeIn(1500);
            $("#pikame").PikaChoose();
    });
</script>
<script type="text/javascript" src="js/jquery.pikachoose.js"></script>
<div id="slideshow">
    <ul id="pikame" >
        <li><a href="http://www.pikachoose.com"><img src="slideshow/purplebackground.png"/></a></li>
        <li><a href="http://www.pikachoose.com"><img src="slideshow/redbackground.png"/></a></li>
        <li><a href="http://www.pikachoose.com"><img src="slideshow/yellowbackground.png"/></a></li>
</ul>
</div>

1 Ответ

2 голосов
/ 13 декабря 2011

$. Ready будет срабатывать при готовности DOM, а не при загрузке страницы.

Перед загрузкой страницы вы можете получить нежелательные результаты при использовании анимации, поскольку такие свойства, как ширина / высота элементов, которые выкак бы оживить может еще неизвестно.Кроме того, изображения, используемые pikachoose, могут по-прежнему загружаться не полностью.

Поэтому вместо выполнения этих функций лучше использовать $ (window) .load ().

Чтобы скрыть слайд-шоу передстраница загружена, вы можете использовать это: 

<script type="text/javascript">
  //add a class to the html-element to be able to apply
  //a different style if JS is enabled
    $('html').addClass('js_on');


    $(window).load(function (){
        $('#slideshow').fadeIn(1500);
        $("#pikame").PikaChoose();
    });
</script>

<style type="text/css">
 /* initially hide #slideshow when JS is enabled */
   html.js_on #slideshow{display:none;} 
</style>
...