Solved

Preloading Images?

Posted on 2001-07-28
10
523 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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
 

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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

820 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