stevenshl
asked on
use onLoad to hide/show images
Hello,
I have an intranet site with GIF images which load slowly and at different rates. I am looking for someone who can give me usable code which preloads images into cashe (possibly using the onLoad function and looping until every image is loaded and then displaying the images all at once.)
I use the <DIV> tag to position my images and can set my images to be hidden by default instead of visible. I am a novice web developer with no javascript experience so please keep everything simple.
Thank you!
I have an intranet site with GIF images which load slowly and at different rates. I am looking for someone who can give me usable code which preloads images into cashe (possibly using the onLoad function and looping until every image is loaded and then displaying the images all at once.)
I use the <DIV> tag to position my images and can set my images to be hidden by default instead of visible. I am a novice web developer with no javascript experience so please keep everything simple.
Thank you!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Our intranet is used by IE and Netscape... we try to keep users current - within the last two revisions of both.
HI,
<html>
<head>
<script language="JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_pre loadImages .arguments ; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" background="images/Celebra tions.jpg" onLoad="MM_preloadImages(' images/pic 0.jpg','im ages/pic1. jpg','imag es/pic2.jp g','images /pic3.jpg' ,'images/p ic4.jpg',' images/pic 5.jpg')">
</body>
</html>
Hope this is pretty clear to you.
Hope this helps you.
Good Luck...:)
<html>
<head>
<script language="JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_pre
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" background="images/Celebra
</body>
</html>
Hope this is pretty clear to you.
Hope this helps you.
Good Luck...:)
ASKER
Thanks for your help... this code definitely got me going in the right direction.
If so you can use the following.
Add this to the <head>-section:
<style type='text/css'>
IMG{visibility:hidden;}
</style>
Then load the usual way (no changes needed in your current code). And then add the folowing script (also in the Head-section):
<script>
function document_onload()
{
for(i=0;i<document.images.
}
window.onload=document_onl
</script>
If you want a different approach, just ask. me or someone else will be able to help you out.
regards,
CJ