Preloading Images?: images

by: CFJNMHPosted on 2001-07-28 at 21:17:55ID: 6330700

Yes, that is if your using them in a swap or something that does't automatically load the image.

I usually use this method,

<img src="theImage" style="visibility: 'hidden'; position: 'absolute';">

you hide the image so its not seen and you make the position absolute so it doesn't take up any space.

by: tewaldPosted on 2001-07-29 at 00:44:47ID: 6330896

Clinton, preloading does help - especially with mouseOver events as there is no delay the first time a user move his/her mouse over the image. Use the following function (preload) and call it using the body onLoad handler.

<html>
<head>
<title>Preloading</title>
<script type="text/javascript" language="javascript">
function preload() {
if (!document.images) return;
var ar = new Array();
var arguments = preload.arguments;
for (var i = 0; i < arguments.length; i++) {
ar[i] = new Image();
ar[i].src = arguments[i];
}
}
</script>
<body onLoad="preload('pic1.gif', 'pic2.gif', 'pic3.gif')">
.
.
.
</body>
</html>

by: tewaldPosted on 2001-07-29 at 00:46:30ID: 6330901

Try again - I forgot to close the head section...

<html>
<head>
<title>Preloading</title>
<script type="text/javascript" language="javascript">
function preload() {
if (!document.images) return;
var ar = new Array();
var arguments = preload.arguments;
for (var i = 0; i < arguments.length; i++) {
ar[i] = new Image();
ar[i].src = arguments[i];
}
}
</script>
</head>
<body onLoad="preload('pic1.gif', 'pic2.gif', 'pic3.gif')">
.
.
.
</body>
</html>

by: ravi_raj123Posted on 2001-07-29 at 00:49:46ID: 6330904

HI,
"preloading does help - especially with mouseOver events as there is no delay the first time
a user move his/her mouse over the image. Use the following function (preload) and call it using the
body onLoad handler." -- as said by tewald.

-----------------------
<html>
<head>
<script language="JavaScript">

</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('Celebrations.jpg','next.gif','Previous.gif')">
<img src="date.gif">
<img src="Previous.gif">
<img src="Celebrations.jpg">
</body>
</html>
_____________

GOOD LUCK...:)

by: coreytiPosted on 2001-07-29 at 22:07:38ID: 6333016

I'll just add that non rollover images can be cached as well, which will cause them to display faster the first time they are called (the browser recognizes the URL and grabs the local one).

Potentially you could use this technique to load images that the user will likely see on subsequent pages of your site. The problem is that they make the page that is doing the preloading look as if it's not done loading yet (you get a bunch of "Downloading Picture blah blah blah" messages in the status bar). I guess it's a matter of preference at that point.

As for preloading techniques, the two above from tewald and Macrome... er, ravi_raj123 work well :)

-corey

by: ClintonPosted on 2001-07-30 at 06:15:27ID: 6334290

Hello,
and thanks for all the suggestions. This is currently what I use for Rollover. Would I insert your code with this to do what I need. Also I would like to pre-load pictures that don't use rollover.

<script language="javascript1.1">
if( document.images )
{

picA= new Image;
picA.src="Default.gif";

picB= new Image;
picB.src="Arrow_Blank.gif";

</script>

<script>

</script>

<td width="12%" valign="middle" align="center"><a HREF="68HC11%20Microcontrollers.htm"
onmouseover="chkVer('go1','pic1A');chkVer('go','pic1B');chkVer('go14','pic1C')"
onmouseout="chkVer('go1','pic1');chkVer('go','picA');chkVer('go14','picB')"><img
NAME="go1" border="0" SRC="file:///C:/web/Orginal/MicroControllers.gif" WIDTH="93"
HEIGHT="30"></a></td>

Thanks
Clinton

by: coreytiPosted on 2001-07-30 at 11:00:15ID: 6335431

You are actually already preloading some images:
----------


picA= new Image;
picA.src="Default.gif";

picB= new Image;
picB.src="Arrow_Blank.gif";

----------

and could do so for others the same way. However, that code gets processed as soon as it is encountered by the browser which means those images effectively get loaded before the rest of the page. While this may be a good thing for rollovers (ensures that the rollover will be ready to go when the page is loaded), it would probably not be the best idea for images that you are just cacheing for future use. If you do want to do that, you should use a function that is accessed "onLoad" of the page (after everything else has loaded). The functions metioned above are very handy and are used by passing the source paths of each image into the function when it is referenced. Additionally, you could use a similar technique to the one you've got now:

----------
in the script area
----------
function staticPreload() {

picAA = new Image();
picAA.src = "/path_to/image_name1.gif";

picAB = new Image();
picAB.src = "/path_to/image_name2.jpg";

picAC = new Image();
picAC.src = "/path_to/image_name3.png";
}
----------

----------
in the body tag of html
----------
onLoad="staticPreload();"
----------

Another suggestion: if you do decide to have you rollover images inside of a function rather than directly encountered, you should probably add a flag to let the rollover function whether or not to proceed when it is called (if the function trys to reference a not yet loaded image object -- a user mouseover before the preload function has completed --, you'll get errors). At the top of your script area, add:

var imagesLoaded = false;

At the bottom of the preload function

Anyway, hope that helps some.

by: coreytiPosted on 2001-07-30 at 11:03:24ID: 6335437

sorry, I submitted that before I was finished!

Here's the rest:

"At the bottom of the preload function" -->
add:

imagesLoaded = true;

and to the rollover funtion, wrap everything in

if( imagesLoaded ) {
// your stuff here
}

-corey

by: ClintonPosted on 2001-07-31 at 19:56:54ID: 6339172

Coreyti,

Sorry I don't fully understand your last two comments.

When the browers is encounted, the Images for my rollover are loaded with my current strip. This is okay for rollovers.

For static Images (pictures) jpg, it would be the best to add in

function staticPreload()
{
picAA = new Image();
picAA.src = "/path_to/image_name1.gif";
}

onLoad="staticPreload();"

How do I find out what my patch would be for the picture?

Thanks again for all your help and suggestions

Clinton

by: ClintonPosted on 2001-08-10 at 06:42:09ID: 6372501

Thanks for the Help

Question

Preloading Images?

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

images

JavaScript

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press