Ges
01-26-2007, 01:21 PM
POST 1
Hi to everyone,
There has been some questions recently about how images etc are loaded upon entry to a web site/page and the time taken.
Firstly, putting functions etc in the <head> section of your code ensures that they are loaded BEFORE they are called/manipulated from scripts/function withing the <body> section. This becomes very apparent when using large slide shows etc. Apart from the amount of images you may have, the size of them also plays an important part. The larger and more images you have then the longer it takes for your site/page to come up. This is the reason for some sites displaying a 'loading bar' to let you know what's going on!
Here is the code to do just that. It originated around 2 years ago ( I believe ), from Dynamic Drive but I've changed and updated it over time but credit must still go to the original author or DD for the skeleton ( of which it is based ). It now works in IE, FF and Opera.
This code would be your index.html. The only addition is the calling of the EXTERNAL Javascript called PROGRESSBAR.JS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Preloading images</title>
<!-- call the external loading script -->
<script language="javascript" src="progressbar.js">
<!--
//-->
</script>
</head>
<body>
<center>
<h1>MY WEBSITE INDEX PAGE</h1>
</center>
</body>
</html>
As you can see the only part you would add to your code is;
<!-- call the external loading script -->
<script language="javascript" src="progressbar.js">
<!--
//-->
</script>
to your <head> section. PROGRESSBAR.JS is where you actually place the images. So if you have a slide show for instance, you would simply refernce them from the array in PROGRESS.JS.
THE NEXT POST IS THE PROGRESSBAR.JS ( due to forum size limits ).
Hi to everyone,
There has been some questions recently about how images etc are loaded upon entry to a web site/page and the time taken.
Firstly, putting functions etc in the <head> section of your code ensures that they are loaded BEFORE they are called/manipulated from scripts/function withing the <body> section. This becomes very apparent when using large slide shows etc. Apart from the amount of images you may have, the size of them also plays an important part. The larger and more images you have then the longer it takes for your site/page to come up. This is the reason for some sites displaying a 'loading bar' to let you know what's going on!
Here is the code to do just that. It originated around 2 years ago ( I believe ), from Dynamic Drive but I've changed and updated it over time but credit must still go to the original author or DD for the skeleton ( of which it is based ). It now works in IE, FF and Opera.
This code would be your index.html. The only addition is the calling of the EXTERNAL Javascript called PROGRESSBAR.JS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Preloading images</title>
<!-- call the external loading script -->
<script language="javascript" src="progressbar.js">
<!--
//-->
</script>
</head>
<body>
<center>
<h1>MY WEBSITE INDEX PAGE</h1>
</center>
</body>
</html>
As you can see the only part you would add to your code is;
<!-- call the external loading script -->
<script language="javascript" src="progressbar.js">
<!--
//-->
</script>
to your <head> section. PROGRESSBAR.JS is where you actually place the images. So if you have a slide show for instance, you would simply refernce them from the array in PROGRESS.JS.
THE NEXT POST IS THE PROGRESSBAR.JS ( due to forum size limits ).