preload images

**belindassy** · Aug 4, 2003 14:24

I think I am going insane!!!!

This code seems so simple but I can not get it to work. I am trying to preload images for use in an image swap. This is the code I am using

<body onLoad="preloadimages('ro_bui.jpg', 'ro_mar.jpg', 'ro_sto.jpg', 'ro_mec.jpg', 'ro_pai.jpg', 'ro_fib.jpg')">

<script language="JavaScript" type="text/javascript">

</script>

In the mouseover event I have

<a href="marina.htm" onmouseover="document.images['ro'].src=roimage[0].src" onmouseout="document.images['ro'].src='ro_base.jpg'">

for each rollover.

Can anybody tell me what I am doing wrong?!?!?!

I am viewing the page on ie6

**Poop_Shoot** · Aug 4, 2003 20:02

Try Something Like This! It Should Work! Post Again If You Have Problems!

Code:

<html>
<head>
<script language="JavaScipt">
var pixs=["images/001.jpg","images/002.jpg","images/003.jpg","images/004.jpg","images/005.jpg"];
var pixsLoaded=[];
for(var i=0;i<pixs.length;i++){
pixsLoaded[i]=new Image();
pixsLoaded[i].src=pixs[i];
}
</script>
</head>
<body>
<img src="images/001.jpg" onmouseover="this.src=pixsLoaded[1].src"
 onmouseout="this.src=pixsLoaded[0].src">
</body>
</html>

**belindassy** · Aug 5, 2003 14:27

As you suggested (thank-you very much) I changed my code and the following works placed in the Head or Body

<script language="JavaScript">

</script>

the problem is my page takes much to long to load; this is also why I was trying the onload event for the body. Even if I used the onload event and simply put this code in a function, I could not get it to work.

Thanks again. Less frustrated.

**Poop_Shoot** · Aug 5, 2003 17:14

Uh Im confused! Usualy a page executes from top to bottom! Thus meaning things in the HEAD section are going to be loaded before the BODY section! And also there is no need for an onload event handler buy the time it hits the onload event! The images are already preloaded, The event handler should actually be called onafterload! Just Keep that Script in the head of your page and it should do its job!

**Jeff Lange** · Aug 5, 2003 17:37

Preloading is for rollover images, meaning, they only have to be preloaded before a user moves his mouse over the image, not before the page is loaded.

**belindassy** · Aug 6, 2003 05:21

I am using the images for a rollover and I am trying to get them to load after the page. I moved the javascript to just before the close body tag and this seemed to help but I know there must be a better way. I can't seem to get the onload event to work.

**Poop_Shoot** · Aug 6, 2003 15:38

Ok one last time! Im pretty sure that the only way to preload images into the cache is before the page loads! Basically the browser reads everything on page caches it! Then loads the page physically for you to see! So IMO there is no way to preload the images after the page has loaded! Sorry and Good Luck!

**Poop_Shoot** · Aug 6, 2003 15:40

You Could try something like this maybe!

Code:

<html>
<head>
<script language="JavaScipt">
var pixs=["images/001.jpg","images/002.jpg","images/003.jpg","images/004.jpg","images/005.jpg"];
var pixsLoaded=[];

window.onload=function(){
for(var i=0;i<pixs.length;i++){
pixsLoaded[i]=new Image();
pixsLoaded[i].src=pixs[i];
}}
</script>
</head>
<body>
<img src="images/001.jpg" onmouseover="this.src=pixsLoaded[1].src"
 onmouseout="this.src=pixsLoaded[0].src">
</body>
</html>

**belindassy** · Aug 6, 2003 18:16

Thanks for your help poop shoot. I added a menu function, put the preload code in with it, called the menu function with the onload event and it works. Go figure.

User Tag List

Thread: preload images

Thread Tools

Display

preload images

Bookmarks

Bookmarks

Posting Permissions