JavaScript – Preload Image
Version: 65.2
Revision: 132 Build 12
JavaScript – Preload Image
Introduction:for those who would like to allow browsers to load their images first and reduce ‘loading – time’, then take a look at these source. However, please take ‘note’ that IE6 and older version will not work properly if you apply these to your web-pages.
1.] Download notepad++ from the original author or from a mirror.
——————————-
http://sourceforge.net/projects/notepad-plus/
http://filehippo.com/download_notepad/
——————————-
Rules: here is the basic illustration for the “PreImage, new Image and PreImage.src” functions.
——————————-
a.] The “PreImage” function is the first step of setting up a new script (syntax) for an image.
b.] The “new Image” function instruct the script to prepare / use an image with the given width and height. But, if you don’t want to insert numbers, then you can leave it blank.
c.] The “PreImage.src” loads the specified image into ‘variable’ areas.
——————————
Method One: preload images with “PreImage” syntax.
——————————
1.] Create a Javascript file and save it as: “image-preload.js” (without the initial quotes).
2.] Copy these script into your new page file.
Notes: you’ll need to replace my images with your own images.
—Copy Source Code—
<!--
if (document.images) {
PreImage1= new Image()
PreImage1.src = "../Lair360_RSS.gif"
PreImage2 = new Image()
PreImage2.src = "../image/crystal_globe.png"
PreImage3 = new Image()
PreImage3.src = "../image/homepage.png"
PreImage3 = new Image()
PreImage3.src = "../image/homepage.png"
}
// -->
—End Source Code—
Copyright 2001-2008 Lair360
3.] Save your JScript file and use this given ‘source’ to import any images directly from your “head” tags.
—Copy Source Code—
<script type="text/javascript" language="Javascript" src="menus.js" /></script>
—End Source Code—
Notes: if you want this script to work, you’ll need to replace “menu.js” and convert them to “image-preload.js”.
4.] Done!
Notes: to add a single “PreImage” you can use this source instead of the above.
—Copy Source Code—
<!--
if (document.images) {
PreImage1 = new Image(88,31);
PreImage1.src = "Image1a.gif";
}
// -->
—End Source Code—
Advice: if you want to put everything into a JavaScript Syntax / HTML without the ‘import’ function, then use this function instead!
—Copy Source Code—
<head>
<script language="Javascript" type="text/javascript">
<!-- hide from non JavaScript Browsers
if (document.images) {
PreImage1= new Image()
PreImage1.src = "../Lair360_RSS.gif"
PreImage2 = new Image()
PreImage2.src = "../image/crystal_globe.png"
PreImage3 = new Image()
PreImage3.src = "../image/homepage.png"
PreImage3 = new Image()
PreImage3.src = "../image/homepage.png"
}
// End Hiding -->
</script>
—End Source Code—
To make things a little easier, you can use this version. They are simplified…
—Copy Source Code—
<script language="Javascript" type="text/javascript">
<!-- hide from non JavaScript Browsers
if (document.images) {
img1 = new Image();
img1.src = "image1.jpg";
img2 = new Image();
img2.src = "image2.jpg";
img3 = new Image();
img3.src = "image3.jpg";
}
// -->
</script>
—End Source Code—
——————————
Method Two: preload images with “flexible array” – syntax.
——————————
1.] Create a Javascript file and save it as: “image-preload.js” (without the initial quotes).
2.] Copy these script into your new JavaScript file…
Notes: This method can be utilized if you have an external JavaScript file which is used by multiple – pages. It’s also useful if you have a large website that needs lots of Script to function.
3.] Copy this code and save it as “javacore_engine.js” and put it in your websites’ head.
But, to keep things simple, I would recommend you to import them instead of inserting…
—Copy Source Code—
function preload(images) {
if (document.images) {
var i = 0;
var imageArray = new Array();
imageArray = images.split(',');
var imageObj = new Image();
for(i=0; i<=imageArray.length-1; i++) {
//document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images)
imageObj.src=images[i];
}
}
}
—End Source Code—
Copyright 2001-2009 Lair360
4.] Make another file and import the script after the script which is shown above…
—Copy Source Code—
preload('image1.jpg,image2.jpg,image3.jpg');
—End Source Code—
Copyright 2001-2008 Lair360
Notes: replace the images with your own images.
You can also have as many as you like (just make sure they are separated by a comma).
Import function.
—Copy Source Code—
<script type="text/javascript" language="Javascript" src="menus.js" /></script>
—End Source Code—
Advice: you can also use this techniques to simplify the rules a little better…
—Copy Source Code—
<script type="text/javascript" language="JavaScript">
<!--
if (document.images)
{
preload_image_object = new Image();
// set image url
image_url = new Array();
image_url[0] = "http://example1.com/image0.gif";
image_url[1] = "http://example2.com/image1.gif";
image_url[2] = "http://example3.com/image2.gif";
image_url[3] = "http://example3.com/image3.gif";
var i = 0;
for(i=0; i<=3; i++)
preload_image_object.src = image_url[i];
}
//-->
</script>
—End Source Code—
Notes: just change: “i<=3" to a higher number if you are loading more images...
Alternative: to make thing even more simpler (for the noobs), you can use this instead…
—Copy Source Code—
<script type="text/javascript" language="JavaScript">
<!--
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
//Enter path of images to be "preloaded" inside the script.
preloadimages(
"http://mydomain.com/one.gif",
"http://mydomain.com/two.gif",
"http://mydomain.com/three.gif")
//-->
</script>
—End Source Code—
Copyright 2001-2009 Lair360
