Forum Moderators: open

Message Too Old, No Replies

window.onload

preload images window.onload

         

webaster

1:44 pm on Jan 6, 2005 (gmt 0)

10+ Year Member




In my head

<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

orion_rus

3:32 pm on Jan 6, 2005 (gmt 0)

10+ Year Member



i think window.onload u should place to body. The rest seems fine
Good luck to you

webaster

4:08 pm on Jan 6, 2005 (gmt 0)

10+ Year Member



like this

<body onload="preloadimages('images/large.jpg')";>

rocknbil

4:27 pm on Jan 6, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Someone slap me if I'm wrong, but if this is in the HEAD of the document - it's going to load first. Meaning there's no need to call a function but allow it to execute as an inline script. Note how I've just removed the opening and closing function line and brackets.

<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>

rocknbil

3:43 am on Jan 7, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



OOPS - sorry, was in a hurry -

var myimages=new Array("images/verylargepicture.jpg","images/anotherlargepicture.jpg");
var objects = new Array(myimages.length);

for (i=0;i<myimages.length;i++){
objects[i]=new Image();
objects[i].src=myimages[i];
}

Bernard Marx

6:23 pm on Jan 7, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Actually, rocknbil, you were half-OK the first time.
There's no need for the second array, being as JS is so loose.
Just replace the strings in the 'myimages' array with image objects.
A temporary var is needed for this:

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]

rocknbil

6:32 pm on Jan 7, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thank you, I was thinking (if you call it that) that the Image() objects need to be in memory to be of any good. :-)

Bernard Marx

6:42 pm on Jan 7, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Very true..I reckon. Don't want our Image objects orphaned before they manage to get an image file into the cache.

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.

webaster

11:37 am on Jan 10, 2005 (gmt 0)

10+ Year Member



In the head of document:

<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

Bernard Marx

8:17 pm on Jan 10, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member




..kind of. The scripting will work. A few things though.

- '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 ;
}
}

webaster

1:27 pm on Jan 11, 2005 (gmt 0)

10+ Year Member



i always want the images to preload first and then show the page with background-image , I used divs instead of tables so loads faster too.