Loading .gif until slideshow images are loaded

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Parmenion
Forum Commoner
Posts: 35
Joined: Sat Dec 12, 2009 8:29 am

Loading .gif until slideshow images are loaded

Post by Parmenion »

Hi,

I have a simple slideshow that fades in between images. What I'd like to know is whether it's possible to preload the images for the slideshow and whilst that is happening display a loading .gif where the slideshow images will appear?

I'm fairly new to JavaScript so a little stuck on how to achieve this.

Thanks for any advice.
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Re: Loading .gif until slideshow images are loaded

Post by Jonah Bron »

Start by constructing the HTML that displays the loading GIF. Then pre-load the images with Javascript. Here's an article about it.

http://www.techrepublic.com/article/pre ... ct/5214317

Use the onload() event to register when the images finish. When it does, remove the GIF HTML and place the slideshow.
Parmenion
Forum Commoner
Posts: 35
Joined: Sat Dec 12, 2009 8:29 am

Re: Loading .gif until slideshow images are loaded

Post by Parmenion »

Thanks for the link and info. Sorry for the slow reply. I'll check it out and see if I can get it to work. :)
Parmenion
Forum Commoner
Posts: 35
Joined: Sat Dec 12, 2009 8:29 am

Re: Loading .gif until slideshow images are loaded

Post by Parmenion »

OK, I've had a chance to experiment with it today but I'm having trouble testing it. My code is as follows:

[text]
$(document).ready(function() {

document.getElementById("loading").style.display='block'; //show the loading screen
document.getElementById("slideshow").style.display='none'; //hide the slideshow
document.getElementById("controls").style.display='none'; //hide the controls

$('#slideshow').cycle({
fx: 'scrollRight',
timeout: 3000,
speed: 500,
delay: -2000,
pager: '#pager',
next: '#next',
prev: '#prev'
});

$('#playControl').toggle(
function(){
$('#slideshow').cycle('pause');
$(this).text('Play');
},
function(){
$('#slideshow').cycle('resume');
$(this).text('Pause');
});

var preloadImages = ['../elements/image0.gif',
'../elements/image1.jpg',
'../elements/image2.gif',
'../elements/image3.jpg',
'../elements/image4.gif',
'../elements/image5.jpg',
'../elements/image6.jpg',
'../elements/image7.jpg',
'../elements/image8.gif',
'../elements/image9.jpg'];
var imgs = [];
for (var i = 0; i < preloadImages.length;i++) {
imgs = new Image();
imgs.src = preloadImages;

if (i == preloadImages.length-1) { //the slideshow is ready to be shown
document.getElementById("loading").style.display='none'; //hide the loading screen
document.getElementById("slideshow").style.display='block'; //show the slideshow
document.getElementById("controls").style.display='block'; //show the controls
}
}

});
[/text]

It certainly hides the slideshow and controls and displays the loading screen (I simply adjusted the if statement to test that). Even after clearing the cache I can't get the loading screen to display though (images load instantly), perhaps because I'm testing it on my laptop but then I don't have anywhere online to test it right now. It goes straight to the slideshow.

Can you please check the code and let me know if there's a mistake? I'll admit I'm more of a graphic designer than developer.

Thanks
Parmenion
Forum Commoner
Posts: 35
Joined: Sat Dec 12, 2009 8:29 am

Re: Loading .gif until slideshow images are loaded

Post by Parmenion »

I think I may have it working correctly now by making the preload a function that starts when the body loads. The loading screen shows briefly now before starting the slideshow.
Parmenion
Forum Commoner
Posts: 35
Joined: Sat Dec 12, 2009 8:29 am

Re: Loading .gif until slideshow images are loaded

Post by Parmenion »

I've run into a problem in IE. It works fine in Firefox but in IE it will only show the first slide and the following slides won't display at all. It cycles through but won't show anything. Once it gets back to the first slide it won't display that again funnily enough. If I take the following code out it will show each slide perfectly though.

[text]
document.getElementById("slideshow").style.display='none'; //hide the slideshow
document.getElementById("controls").style.display='none'; //hide the controls
[/text]

The slideshow is structured as below in HTML:

[text]
<div id="slideshow">
<div>
<img src="image1.jpg" />
</div>
<div>
<img src="image2.jpg" />
</div>
</div>
[/text]

Any idea what's going wrong?
Parmenion
Forum Commoner
Posts: 35
Joined: Sat Dec 12, 2009 8:29 am

Re: Loading .gif until slideshow images are loaded

Post by Parmenion »

I seem to have solved it by myself again. Changing the style from display='block' to visibility='visible' has solved it. The CSS style when the page starts is set to 'visibility: hidden', whereas before it was 'display: none'.
Post Reply