CODEWITHSUNDEEP
javascriptjqueryfadeindocument-ready
MillerMedia
MillerMedia

Reputation: 3671

fadeIn using $(document).ready( ) Causing a Noticeable Lag

I'm relatively new to javascript and am building a web page. I'm using the Pikachoose slideshow as a banner on the page and I couldn't find a way to get it to fade in on load. When the page loads, the first image of the slideshow just loads straight up instead of fading in.

I decided to just use a fadeIn javascript function on the whole slideshow. Here is my 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>

So basically it fades in and then Pikachoose starts up. BUT there is a noticeable lag on the fadein when the page loads. It works but it's a little choppy. Once it loads the slideshow works without any problems. Is there a way to delay the fadeIn slightly until the whole page loads so it's not getting tied up? I thought that was what the ready function accomplished though.

Why do you think that's happening? Any ideas? Thanks.

EDIT

Here's the full code:

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

Upvotes: 3

Views: 3307

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

$.ready will fire when the DOM is ready, not when the page is loaded.

Before the page is loaded you may get undesired results when using animations because properties like width/height of the elements you like to animate may still be unknown. Also the images used by pikachoose may still not be loaded completely.

So you better use $(window).load() instead to execute your functions.

To have the slideshow hidden before the page is loaded, you may use this:

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

Upvotes: 2

Related Questions