Hi,
This is a script from js-examples. It preloads a set of images, displays one, then you can click to display the rest one by one.
HTH,
Lillu
<html>
<head>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: JS-Examples -
http://www.js-examples.com/
-->
<script language="JavaScript">
<!-- // preload photos
var mypix = new Array()
function preloadImages(){
for (i=0; i<preloadImages.arguments.length;i++){
mypix[i]=new Image();
mypix[i].src=preloadImages.arguments[i];
}
} // now allocate first photo
thispic = 0;
var isIE=document.all?true:false;
var isNS4=document.layers?true:false;
var isNS6=navigator.userAgent.indexOf("Gecko")!=-1?true:false;// now change photo to next
function processnext(){ // check if more pics
if(!document.images)return;
thispic=(thispic+1)%mypix.length;
if(isIE)
document.all.pic1.src = mypix[thispic].src;
else if(isNS4)
null;
else if(isNS6)
null;
}
function initImgs()
{
preloadImages("http://www.js-examples.com/js/pic1.gif",
"http://www.js-examples.com/js/pic2.gif",
"http://www.js-examples.com/js/pic3.gif",
"http://www.js-examples.com/js/pic4.gif",
"http://www.js-examples.com/js/pic2.gif",
"http://www.js-examples.com/js/pic3.gif");
}//-->
</script>
<style>
#photos {
position:absolute;
left:245px;
top:311px;
width:50;
height:50;
z-index:5;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
border: 1px none #000000;
}
</style>
</head>
<body onload="initImgs();">
<div id="photos">
<a href="javascript:processnext()"><img id=pic1 src="http://www.js-examples.com/js/pic4.gif" width="50" height="50" alt="Image Alt Text"></a>
</div>
<BR><center><a href='http://www.js-examples.com'>JS-Examples.com</a></center>
</body>
</html>
: hello ppl,
:
: I am new to java scripr and need some help with this
: preload images script.
:
: The problem is that I use this script for loading
: many pics on different html pages. So, I keep
: pasting it in each page....... now this is redundent stuff,
:
: So i was hoping to make it in to a single .js file and
: send the images as parameters from with in the page.
:
: But as i have problems with arrays i couldnt.
: So can anyone solve my problem, make the script
: in to a dynamic one which accepts the images as
: parameters.
:
: Here is the <head> part of the script..
:
: <script language="JavaScript">
: <!--
: vers = 1.0;
: // -->
: </script>
: <script language="JavaScript1.1">
: <!--
: vers = 1.1;
: // -->
: </script>
: <script language="javascript">
: <!--
: function initArray() {
: this.length = initArray.arguments.length;
: for (var i = 0; i < this.length; i++) {
: this[i] = initArray.arguments[i];
: }
: }
:
:
: // Loaded Pictures go here
: var pics = new initArray(
: "../1.jpg",
: "../2.jpg",
: "../3.jpg", <!-- All the images to be preloaded -->
: "../4.jpg",
: "../5.jpg",
: "../6.jpg");
:
:
: function transfer(param) {
: location.href = "mainboard.html"; // URL of second page goes here **
: }
:
: function done() {
: if (vers < 1.1)
: transfer();
: else
: commence_loading();
: }
:
: function commence_loading() {
: for (g=0;g<pics.length;g++)
: eval('document.preload'+g+'.src = "'+pics[g]+'";');
: }
:
: // preload the status bar images
: if (vers >= 1.1) {
: blue = new Image();
: blue.src = "../../images/scroll/blue.gif";
: black = new Image();
: black.src = "../../images/scroll/white.gif";
: }
:
: var loaded = new initArray(0);
: for (h=0;h<pics.length;h++)
: loaded[h] = 0;
: num_loaded = 0;
:
: function update(num) {
: loaded[num]++;
: if (loaded[num] == 2) {
: if (vers < 1.1)
: document.stats.status.value += "||";
: else
: eval('document.status'+num_loaded+'.src = "../../images/scroll/blue.gif";');
: num_loaded++;
: if (num_loaded == pics.length)
: transfer();
: }
: }
: // -->
: </script>
:
:
