Solved

Preloading Images?

Posted on 2001-07-28
10
521 Views
Last Modified: 2008-02-01
Hello,

Can someone tell me if Preloading images does really work? And if so what type of code would I use for it.

Thanks for any insight with this

Clinton
0
Comment
Question by:Clinton112299
  • 3
  • 3
  • 2
  • +2
10 Comments
 

Expert Comment

by:CFJNMH
ID: 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.
0
 
LVL 2

Expert Comment

by:tewald
ID: 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>
0
 
LVL 2

Accepted Solution

by:
tewald earned 50 total points
ID: 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>
0
 
LVL 4

Expert Comment

by:ravi_raj123
ID: 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">
<!--
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_preloadImages.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" 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...:)
0
 
LVL 1

Expert Comment

by:coreyti
ID: 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
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:Clinton112299
ID: 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 )
{
<!--Pictures-->
picA= new Image;
picA.src="Default.gif";

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

</script>

<script>
<!--
function chkVer(imagename,objectsrc)
{
var n=navigator.appName
var v=parseInt(navigator.appVersion)
var browsok=((n=="Netscape")&&(v>=3))
var browsok2=((n=="Microsoft Internet Explorer")&&(v>=4))
if ((browsok)||(browsok2))
document.images[imagename].src=eval(objectsrc+".src")
}
//-->
</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
0
 
LVL 1

Expert Comment

by:coreyti
ID: 6335431
You are actually already preloading some images:
----------

<!--Pictures-->
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.
0
 
LVL 1

Expert Comment

by:coreyti
ID: 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
0
 

Author Comment

by:Clinton112299
ID: 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
0
 

Author Comment

by:Clinton112299
ID: 6372501
Thanks for the Help
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now