...

View Full Version : Simple preload image function



Chris Hick
10-10-2011, 05:51 AM
Here is a javascript code snippet that will preload your images.


function preloadImages()
{
if(document.images)
{
if(!document.imageArray) document.imageArray = new Array();
var i,j = document.imageArray.length, args = preloadImages.arguments;

for(i=0; i<args.length; i++)
{
if (args[i].indexOf("#")!=0)
{
document.imageArray[j] = new Image;
document.imageArray[j++].src = args[i];
}
}
}
}


In order to use it just do the following by putting your images in to the function as attributes.


Example: preloadImages('file.gif', 'http://www.x.com/y.gif');

finoy_ako
10-18-2011, 06:29 AM
is this one can also preload a flash file?

abagnale47
10-18-2011, 08:17 AM
If you're looking for a way to speed up your web site's perceived load time, preloading your images may be your answer. By using the following JavaScript code, you can preload the images you specify prior to your web page opening. This will enable your images to promptly display instead of your visitors having to wait for them to load.

Place this code between your <HEAD> and </HEAD> tags:
<SCRIPT language="JavaScript">
<!-- Script courtesy of http://www.-------.net - Your Guide to Professional Web Site Design and Development
var preload=new Image();
preload.src="(image.gif)";
// -->
</SCRIPT>
Edit the text indicated in red to your image file name.
ALL done :-)

rnd me
10-24-2011, 07:27 PM
@chris_hick:

fnInstance.arguments is deprecated. use arguments instead.

rnd me
10-24-2011, 07:31 PM
If you're looking for a way to speed up your web site's perceived load time, preloading your images may be your answer. By using the following JavaScript code, you can preload the images you specify prior to your web page opening. This will enable your images to promptly display instead of your visitors having to wait for them to load.

uhh, no, that's not right at all.

if you indeed "preload the images you specify prior to your web page opening", then the user won't see anything while the images preload.

so, it takes LONGER to see ANYTHING when you preload in the head like that. some browsers will que up several, so the hit might not be huge, but in all cases it will be slower than using <img> tags would be.


the reason images are pre-loaded is not for perceived performance, it's so that image dimensions are known before rendering complex layout using JavaScript, or to cover up bad UI decisions like :hover-based rollovers with different image files...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum