preload img in javascript help

judithm · #1 (**permalink**) 09-11-2008, 12:01 PM

Hi,

Can someone help me in javascript with preloading images. I am using a template and I want to preload the images for each page. Here is an exemple of a page : Andrée Roy | Artiste-peintre

What I did as a compromise is to have the images preload in the index.htm. Andrée Roy | Artiste peintre | Décoratrice But if someone gets to the site without going through the index, it doesn’t work.

Please help.

Thanks

deepsand · #2 (**permalink**) 09-11-2008, 07:10 PM

Well, if they're loaded by one page only, and the visitor never loads that page, why would you expect the images to be displayed?

DaveSawers · #3 (**permalink**) 09-11-2008, 07:38 PM

Quote:

Originally Posted by deepsand

Well, if they're loaded by one page only, and the visitor never loads that page, why would you expect the images to be displayed?

Because the cache loads the images and displays them when the first page is displayed and doesn't have to reload them when moving onto the next page.

Anyway, in the <body> tag, add an onload and the javascript, like:

Code:

<body onload="initialsetup()">

<script>
function initialsetup() {
    MM_preloadImages('img1.gif', 'img2.gif', 'etc');
}

function MM_preloadImages() {
  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>

DaveSawers · #4 (**permalink**) 09-11-2008, 07:44 PM

Quote:

Originally Posted by judithm

Here is an example of a page : Andrée Roy | Artiste-peintre

Hmm. Red text on a black background. On other pages, grey text on a black background. I couldn't read it at all so I left the site right away. Yuk!

deepsand · #5 (**permalink**) 09-11-2008, 09:15 PM

Quote:

Originally Posted by DaveSawers

Because the cache loads the images and displays them when the first page is displayed and doesn't have to reload them when moving onto the next page.

How do they get cached if, per the OP, the visitor never loads the page which references the images?

iainrstewart · #6 (**permalink**) 09-17-2008, 02:18 PM

Regarding judithm (preload img in JavaScript help):-

I assume that you are referring to a second set of images to be used in html event handlers such as onmouseover, onmousedown etc.

All other images which are part of the page get downloaded anyway without any action on your part.

To have a browser download another set, you can use the following JavaScript conditional if statement:-

if(document.images){
var clickme1=new Image(100,30);clickme1.src="";
var clickme2=new Image(100,30);clickme2.src="";
var clickme3=new Image(100,30);clickme3.src="";
var clickme4=new Image(100,30);clickme4.src="";
var clickme5=new Image(100,30);clickme5.src="";
var clickme6=new Image(100,30);clickme6.src="";
var clickme7=new Image(100,30);clickme7.src="";
var clickme8=new Image(50,30);clickme8.src="";
var clickme9=new Image(50,30);clickme9.src="";
var clickme10=new Image(50,30);clickme10.src="";
var clickme11=new Image(100,30);clickme11.src="";
var clickme12=new Image(100,30);clickme12.src="";
}

The name which I show clickme1 is the name that I use in my own site to store a second image. You can use whatever name that you wish to use to name the var (storage container). Create a new var for each image. In the clickme1.src double quotes will be the name of the image to be stored. In the first statement the numbers in brackets after new Image is the size of the image in pixels ie 100px width and 30px height. These figures happen to be the figures appropriate to some of my images on my site. You will have to make the changes appropriate to your site images.

eg var next_image_one=new Image(85,40);next_image_one.src="this_is_it.gif";

Put the above if conditional statement in a separate script file which you appropriately name and in the head of every page source code put a reference to the separate script file. This will cause every page to download the image files.

For example, the script file could be named other_images.js and the reference in the head of every page would be:-

<script type="text/JavaScript" src="other_images.js"></script>

Iain R Stewart (excarex@yahoo.co.uk)

judithm · #7 (**permalink**) 09-18-2008, 11:20 AM

Thanks DaveSawers and iainrstewart.

Judith

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
AJAX and javascript calling javascript	krnl	Web Programming Discussion Forum	14	11-18-2007 11:00 AM
Help with javascript...	beka	Graphics & Design Discussion Forum	4	02-20-2006 07:04 PM
Javascript + RSS + RSS = ?	ofoglada	Web Programming Discussion Forum	6	02-05-2006 06:33 AM
javascript	souvik das	Submit Your Logo For Review	2	02-25-2005 11:40 AM
JavaScript Help	Dragonsi	Web Programming Discussion Forum	12	05-29-2004 05:30 AM