PDA

Click to See Complete Forum and Search --> : Pre Loader

troy1984
10-04-2004, 03:21 AM
Hi all,
I've made a page in HTML and PHP, the index has a lot of cut pictures in tables etc, so if my site loads slowly it looks like....
So I need some kind of pre loader that loads all my images before it displays them. I tried a js but (it could be the script) didn't seem to work.

Can anyone give me the best method to overcome my problem, must I use JS/ (Flash?!) or whatever.

Thanks in advance!
gil davis
10-04-2004, 06:55 AM
If the images are already in the HTML, preloading them only makes things worse. The only time a preload should be used is for images that are not going to be visible on page load, but will be shown using script later.

If your page loads slowly due to a large total file size, the only way to make it better is to reduce the number of colors or density of the images.
troy1984
10-04-2004, 07:08 AM
It isn't the loading time that is my problem, it are mostly 1 colour pics of a few pixels, It's just that it looks like crap when you load the page... So i thought that is was better to preload (if possible) behind maybe a flash intro (if flash kan preload html, pics etc) or a good js that doesn't display my html page untill it's fully loaded.

P.S. Tnx for the fast reply!
gil davis
10-04-2004, 07:57 AM
or a good js that doesn't display my html page untill it's fully loaded.
http://javascript.internet.com/page-details/preload-page.html

Actually, I've improved this a bit since its introduction.

<head>
<style type="text/css">
DIV.wait {position:absolute; margin: 0pt; border: none; visibility:visible; layer-background-color: #FFFFCC; background-color: #FFFFCC; width: 100%; height: 100%; top: 0; left: 0}
</style>
<script>
var agt = navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_nav = ((agt.indexOf('mozilla') != -1) && (agt.indexOf('spoofer') == -1)
&& (agt.indexOf('compatible') == -1) && (agt.indexOf('opera') == -1)
&& (agt.indexOf('webtv') == -1));
var is_nav4up = (is_nav && (is_major >= 4));
var is_nav5up = (is_nav && (is_major >= 5));
var is_ie = (agt.indexOf("msie") != -1);
var is_ie3 = (is_ie && (is_major < 4));
var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0") == -1));
var is_ie4up = (is_ie && (is_major >= 4));
var is_ie5up = (is_ie && !is_ie3 && !is_ie4);
var _hide = (document.layers) ? "hide" : "hidden";

// this routine adds the function getElementById to an old browser
if (!document.getElementById) {
document.getElementById = function(strID) {
if (document.layers) return document.layers[strID];
if (document.all) return document.all[strID];
return null; // expect the unexpected
}
}

function init() {
var wait = document.getElementById("wait");
if (is_ie4up || is_nav5up)
{wait.style.visibility = _hide;}
else
{wait.visibility = _hide;}
}
</script>
</head>
<body onload="init()">
<div id="wait" class="wait">
<script language="Javascript" type="text/javascript">
<!--
var _w = is_ie4up ? document.body.clientWidth - 2 : window.innerWidth;
var _h = is_ie4up ? document.body.clientHeight - 2 : window.innerHeight;
document.write("<table border=0 width="+_w+" height="+_h+"><tr valign=center><th>Please Wait ... Loading</th></tr></table>");
//-->
</script>
</div>
The original example did not fully cover the window. This one does. For an example, see http://gil.davis.home.att.net/space_pics.htm
troy1984
10-05-2004, 03:27 AM
Yeah man thats great.
Exactly what I was looking for. Thank you so much, you helped me out great.
Greetings