[HTML/PHP]Preloader for gallery

ringo747

ringo747

ringo747

Soldato
Joined
1 Feb 2006
Posts
8,188
Hi guys,

I have a script which crawls through one of my directories and generates links to images for an online gallery.

What I want to do is not display anything until the images have all loaded except for something like a "Loading...please wait" message.

I haven't really a clue what you call this functionality so google didn't bring up much. Looked for preloader stuff but it all was to do with flash preloaders.

The best way of explaining is:

If all images are loaded {
display page
}
else {
put a loading message on screen
}

Any help would be appreciated
 
All them lightbox kinda things have a functionality where it doesn't load certain parts of the javascript animation and the image until the image is finished downloading and a preloader is shown. Is that the type of thing your looking for?
 
yeah for each image there is a kind of preloader thing which spins for a while until the image loads. What I need is something on the main gallery page though. I want to load all the thumbnails first befire letting the user click on anything. Once all the thumbnails have loaded only then should the user be able to do anything. So basically I need a preloader for the main gallery page.
 
Well, I suppose you could generate a div that has a z index making it on top of all other divs, and making it 100%x100% and maybe transparent grey or something with "loading" and a nice animation gif.. Then, you'd hide his div once the page has loaded.

You could use javascript to "preload" all the thumbnails, then execute the hide div function at the end.
 
Will have another look through google although the first time I looked for preloaders all the results were flash related! Will have a play around again with it after work. Cheers!
 
ringo747 said:
Will have another look through google although the first time I looked for preloaders all the results were flash related! Will have a play around again with it after work. Cheers!
Click to expand...
I think you could just put the below in the header to load the images:

Code: 
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

image1 = new Image();
image1.src = "image1.gif";

image2 = new Image();
image2.src = "image2.gif";

[COLOR="Red"]...etc...
[/COLOR]
document.getElementById('loading').style.visibility = 'hidden'; 

// End -->
</script>

Create a 100%x100% div called "loading", set z-index to 99, have a "loading.. please wait fools!" on the div. Not tested, and written in my lunch hour!
 
thanks for the response mate. I guess I could use php to generate the links to the image files within the javascript - this comes from an array which contains all my images.

Originally I had thought there must be some way of just checking if the whole page had loaded. Like would there be a checkPageLoaded method or anything in javascript that detects a page loaded event?
 
ringo747 said:
thanks for the response mate. I guess I could use php to generate the links to the image files within the javascript - this comes from an array which contains all my images.

Originally I had thought there must be some way of just checking if the whole page had loaded. Like would there be a checkPageLoaded method or anything in javascript that detects a page loaded event?
Click to expand...

Well, you could do a body onload=*hide loading message*... BUT I don't know if this is triggered when the html is loaded, or the images too.

I can give you a method that'll tell you when the page is loaded... but it is an IE (hence Opera) only thing... no FF.
 
I guessed there would be some browser specific issues which are always annoying! I'll maybe have a look at some of the lightbox stuff and see if I can find out how the normal image preloaders are implemented and then try to modify it to work on the main gallery page. Thanks for your help mate
 
ringo747 said:
I guessed there would be some browser specific issues which are always annoying! I'll maybe have a look at some of the lightbox stuff and see if I can find out how the normal image preloaders are implemented and then try to modify it to work on the main gallery page. Thanks for your help mate
Click to expand...

Did you try what I said? If not, I'll have a play this weekend for you.
 
hi, unfortunately I haven't had time at all to have a try but will do beginning of the week all being well. Will report back if I have any success!
 
ringo747 said:
hi, unfortunately I haven't had time at all to have a try but will do beginning of the week all being well. Will report back if I have any success!
Click to expand...
Hi.

I've done it for you:

Code: 
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
// attach event after page loads
if( window.addEventListener ) {
window.addEventListener('load',loadMsg,false); //legacy
} else if( document.addEventListener ) {
document.addEventListener('load',loadMsg,false); //proper
} else if( window.attachEvent ) {
window.attachEvent("onload", loadMsg); //IE only
}

//hide loading message
function loadMsg(){
document.getElementById('transparency').style.display="none";
document.getElementById('loading').style.display="none";
}
</script>
</head>

<body>

<div id="transparency" style="position: absolute; z-index: 99; width: 100%; height: 100%; background-color:#666666; filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6"><center><br><br><br><h1>Loading...</h1></center></div>
<div id="loading" style="position: absolute; z-index: 100; width: 100%; height: 100%"><center><br><br><br><h1>Loading...</h1></center></div>

<div id="body"style="position: absolute; z-index: 1">
<p>blah blah blah blah blah</p>
[COLOR="Red"]**place all your page in this div**[/COLOR]
</div>
</body>
</html>

Turns out there was no need to preload the images. Just monitor loading progress.
 
thanks jdickerson for your help with this. Had to tweak the code slightly to get it all working as I wanted but the main javascript you gave helped loads. Added in some opacity effects from mootools and its now all sorted. Thanks muchly.
 
ringo747 said:
thanks jdickerson for your help with this. Had to tweak the code slightly to get it all working as I wanted but the main javascript you gave helped loads. Added in some opacity effects from mootools and its now all sorted. Thanks muchly.
Click to expand...
Yeah, I posted a quick example.

I'd love to see it finished :D
 
You must log in or register to reply here.
Back
Top Bottom