SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2009
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript slider not loading fast enough

    Hi,

    I'm currently working on this website:
    http://www.matthewdean.com.au/yourstreet/

    You may notice on the first load that the jquery slider does not load fast enough and displays the images out of place for just under a second. It makes the website look really broken for this second and was wondering if there is a solution?

    Thank you.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,320
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    What browser do you see that in? I didn't get that on any of my browsers (FF, Safari, Chrome).

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2009
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FF 9.0,

    If your refreshing the browser it won't show it, you need to actually physically type out the address and view the page on the first load.
    It shows the slider as if JavaScript is disabled for almost a split second (easy to miss) before it loads and displays correctly.

    Cheers,

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,320
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Mattoman View Post
    you need to actually physically type out the address and view the page on the first load.
    It shows the slider as if JavaScript is disabled for almost a split second (easy to miss) before it loads and displays correctly.
    I did actually do that, but didn't see the effect, although I have seen that before. I think the reason is that .slides_container has overflow: hidden set on it only through JS, which takes a second or two to kick in. The solution is to add this directly to your style sheet:

    Code:
    .slides_container {
      overflow: hidden;
    }
    See if that helps.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2009
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I did actually do that, but didn't see the effect, although I have seen that before. I think the reason is that .slides_container has overflow: hidden set on it only through JS, which takes a second or two to kick in. The solution is to add this directly to your style sheet:

    Code:
    .slides_container {
      overflow: hidden;
    }
    See if that helps.
    Thank you so much,

    This did help but I also added the following code to make it 100% perfect

    Code:
    .slides_container {
      width: 622px;
      height: 330px;
    }
    .slide-group {
      position: relative;
    }
    Now even if you disable JS it still appears as it should (just without the navigation buttons).

    Thanks again for your help Ralph.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •