homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Preload Images in external file
preloading images from an external file

 2:34 pm on Jan 30, 2011 (gmt 0)

I have a preload function contained in an external JavaScript file.

This function is working fine when called from the header section of the page, passing the name and path of the images to be preloaded.

However, I want to call the routine from a 'start up' function, also contained within the external JS file. The startup function is then called by an onload="startUp()" command in the Body tag. However, it doesn't work.

Can anyone please advise.

The function I am using are....

<body onload="startUp()">

In the external JS file....

function startUp() {

// Preload Images
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)

Can anyone help, please. Thanks in anticipation.



 6:19 pm on Jan 30, 2011 (gmt 0)

You may be having a problem with the relative URLs to the image files, especially if the external JavaScript file is not in the same directory as the parent HTML file. It's easy to check - just use complete URLs in the call to preload().


 7:34 pm on Jan 30, 2011 (gmt 0)

Do you have another script that perhaps does something like:

window.onload = ...

If so, then your onload method will not get called. It's better to set the onload handler in the JavaScript file vs. in an inline handler anyway (to keep separation of content and behavior).

Also, you have a line commented out that does document.write. That method will never work after the onload event fires because document.write will REPLACE the document after the onload event (including writing over your JavaScript calls).

My suggestion would be to check for a window.onload somewhere in one of the script files, and then if that's not found, use Firefox with Firebug to set a break point in your code and inspect each call to see what it's doing.


 10:15 am on Jan 31, 2011 (gmt 0)

Thanks guys

Fotiman, your comment about the commented-out document.write bit is interesting. I was judging that the routine was not working by removing the comments and expecting to see the images displayed at the top of the page as it loads. What is the best/easiest way to check whether preloaded images HAVE been preloaded? Then I can get rid of that line altogether - or is there an alternative to that line that WILL work and display the images for my own peace of mind?

thanks in anticipation of your reply.


 10:27 am on Jan 31, 2011 (gmt 0)

Just another thought - and please excuse this newbie to JavaScript.

If I use absolute addresses for the images that need preloading, then it would actually be better for me not to include the images in the preload() call, but to list them at the start of the funcition. I tried this, but got errors every time so was clearly using the wrong syntax.

So, can anyone offer an amendment to the routine, or alternative routine, that includes the array of images to be preloaded within the actual function. Then, I can just call preload() from the startUp() funciton.



 2:07 pm on Jan 31, 2011 (gmt 0)

What is the best/easiest way to check whether preloaded images HAVE been preloaded?

You could use Firefox and Firebug, and check the "Net" tab to see if HTTP requests are fetched for those images.

Alternatively, if you want to write the images into the document, instead of using document.write you could use DOM methods to create a new <img> element and append to the document. Something like:

var img = document.createElement("img");
img.src = imageArray[i];

Also, you're passing in a string and then parsing that into an array. Instead, why not just pass the values as an array? It might make maintenance slightly easier. And all of the major browsers have support for document.images, so there's no need to test for document.images anymore. For example:

function startUp() {

// Preload Images
function preload(images) {
var i,
imageObj = new Image(),
for (i = 0, n = images.length; i < n; i++) {
imageObj.src = images[i];
img = document.createElement("img");
img.src = imageObj.src;

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved