Javascript slider not loading fast enough

JavaScript
1

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

What browser do you see that in? I didn’t get that on any of my browsers (FF, Safari, Chrome).

3

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

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:


.slides_container {
  overflow: hidden;
}

See if that helps. :slight_smile:

5

Thank you so much,

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


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