Forum Moderators: open
<script type="text/javascript">
<!--
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
window.onload = preloadimages("images/verylargepicture.jpg")
//-->
</script>
Is my window.onload correct and the rest too
<script type="text/javascript">
<!--
var myimages=new Array("images/verylargepicture.jpg","images/anotherlargepicture.jpg");
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image();
myimages[i].src=preloadimages.arguments[i];
}
//-->
</script>
var myimages=new Array("images/verylargepicture.jpg","images/anotherlargepicture.jpg");
for (k=0;k<myimages.length;k++){
var img = new Image();
img.src = myimages[k]
myimages[k] = img;
}..although you can in fact do without it, if you parenthesize cheekily, I think..
for (k=0;k<myimages.length;k++){
((myimages[k] = new Image()).src = myimages[k];
}
(changed i to k. It was messing around with the formatting!)
Is my window.onload correct..?
No it's not, in fact.
orion's correct - you can put it into the BODY onload handler.
rocknbil is even more correct in saying that you can do this immediately, without waiting for the page to load. There may be situations, though, where you might want to wait until the page has loaded.
What you were doing wrong with your Javascript event handler assignment is a common mistake. The idea is to assign a function reference. In plain terms, that means 'no brackets'. To emulate an HTML handler, with arguments included, you assign an anonymous function (which is what an HTML event handler essentially is anyway)..
window.onload = function(){preloadimages("images/verylargepicture.jpg")};
[edited by: Bernard_Marx at 6:35 pm (utc) on Jan. 7, 2005]
That said, I've never completely road-tested this assumption. It's quite possible that orphaned Image objects still download their 'targets', since it's probably a while before they get garbage collected.
<script type="text/javascript">
<!--
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
//-->
</script>
In the body of my document
<body onload="preloadimages('images/large.jpg')";>
Is this correct
- 'push' the image into the array (by using the array length as index).
Using the argument index will mean that any previous images in the
array will be overwritten if the function is used again.
I have moved the onload out of the BODY tag. Might as well have
everything all in one place.
However, as has been said, unless you specifically want to wait for
the page to load before preloading images, you can just call the function
immediately (the alternative line below)
var myimages = new Array()
onload = function(){ preloadimages('images/large.jpg')}
[blue]//or simply:// preloadimages('images/large.jpg');[/blue]function preloadimages()
{
var i, img, args = preloadimages.arguments;
for (i=0;i<args.length;i++){
img = new Image();
img.src = args[i];
myimages[myimages.length]=img ;
}
}