This is really two separate things:
1) How to prevent the slideshow from causing the page layout to jump around while the slideshow and the page are loading.
2) How to introduce a loading image as a visual indicator that the slideshow is loading that will become unseen once the slideshow has loaded.
The first looks fairly easy. If you look at the actual markup on the page we see something like so:
Code:
<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
<div id="slides">
<img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
<img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
<img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
<img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
<a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
<a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
</div>
</div>
<!-- End SlidesJS Required: Start Slides -->
That container has no defined height, so will be zero height until something with either layout height or specified height fills it. The script does that at some point, but I'm guessing, not soon enough for your layout.
You can define a css pixel height for the container class or for that element individually using an id you could assign to it or inline. It should be the height of the images + the height of the navigation/pagination. That is if those controls appear above or below the slideshow. If they're on the sides or superimposed upon the slideshow, then their height should not be included.
Adding a loading image might be as simple as setting a small animated GIF loading image as the background image for that same division. Set it to center no-repeat. With any luck it will appear as the slideshow is loading and simply be covered by the slideshow once it loads:
Code:
.container {
height: ###px; /* set ### to the desired height */
background: url(loading.gif) center no-repeat;
}
But the slides division might have background, a color at least. If it does, the loading image should be applied as background to it instead. Overriding style with the !important keyword might need to be used:
Code:
.container {
height: ###px; /* set ### to the desired height, include height of navigation/pagination if appropriate */
}
#slides {
height: ###px; /* set ### to the desired height, this time only the height of the images */
background: white url(loading.gif) center no-repeat !important;
}
And even that might not show up. If it doesn't I would have to see the page once you have it set up. One thing that would be good is to preload the loading image so that it can in theory be seen as soon as possible, even by first time visitors to the page:
Code:
<script>
;(function(){
var img = new Image();
img.src = 'loading.gif';
})();
</script>
Put that after the styles in the head of the page.
If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
Placeholder for .js Slideshow While It Loads
Reply With Quote
Bookmarks