Solved

Preloading Images?

Posted on 2001-07-28
10
520 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:Clinton112299
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks for the Help
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

743 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

12 Experts available now in Live!

Get 1:1 Help Now