[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
 
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.
 
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!
 
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?
 
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
 
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!
 
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.
 
At the moment the transparent layers are set by css and then hidden by javascript. If javascript is turned off then the 'loading....' animation always is visible! To resolve this I tried setting the css to display:none by default and if javascript is enabled then id make the layer visible, and then hide it again. I cannot get the javascript to override the display:none setting in the css at all. Really am confused!
 
jdickerson said:
That's pretty damn special!

I realise now, you could've also used http://demos.mootools.net/DomReadyVS.Load.
Click to expand...

Thanks! Have been working on all this for some time - basically its my own css for the gallery layout, my own php script to trawl a directory for image with exif data descriptions, slimbox for the gallery functionality and your code modified to do the page load stuff so its a mix of everything!

I looked at the DomReady but this doesn't appear to include images loading so not much good to me really.

jdickerson said:
I'll try and do this tomorrow.

But you could just set the display to none, then on load (body tag) set it to show...
Click to expand...

OK, but will the body onload function execute immediately as the link is clicked on? These elements are hidden as soon as the page fully loaded so I need the 'loading ...' thing to appear first.
 
yeah i tried something like...

Code: 
document.getElementById('transparency').style.display="inline";
document.getElementById('loading').style.display="inline";

but this didn't work.

my code was like:
Code: 
<div id="transparency" style="display:none;position: absolute; z-index: 99; width: 100%.......></div>

<div id="loading" style="display:none;position: absolute; z-index: 100........</div>

The divs transparency and loading just never appeared. Would it be anything to do with having the css styles associated with the tag itself rather than within style tags at the top of page?
 
i did that too - it was weird. It was exactly the same code as you used to hide the divs once the page has loaded only doing the reverse operation. I really am missing my sleep from the clock change so maybe it was something stupid. Will look again tomorrow all being well. Thanks for the help!
 
still not having any luck here... this is what i have so far

javascript
Code: 
<script type="text/javascript">
	document.getElementById('transparency').style.display="block";
	document.getElementById('loading').style.display="block";
</script>

html
Code: 
<div id="transparency" style="display:none;position: absolute; z-index: 99; width: 100%; height: 100%; background-color:#000; filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; left:0;top:0"></div>

<div id="loading" style="display:none;position: absolute; z-index: 100; width:100%; left:0; top:25%"></div>

Any ideas why the script isn't overriding the display:none ??
 
jdickerson said:
Bad practice, but move the JS to after the div. That is:

Code: 
<div id="transparency" style="display:none;position: absolute; z-index: 99; width: 100%; height: 100%; background-color:#000; filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; left:0;top:0"></div>
<div id="loading" style="display:none;position: absolute; z-index: 100; width:100%; left:0; top:25%"></div>
<script type="text/javascript">
	document.getElementById('transparency').style.display="block";
	document.getElementById('loading').style.display="block";
</script>
Click to expand...

Cool will try that... bad practice meaning having the script to override css?
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom