Preload Images in external file - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Preload Images in external file

preloading images from an external file

Tourex

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

10+ Year Member

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() {
 routine1();
 routine2(); 
 preload('images/image1.jpg,images/image2.jpg');
}

// 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)
 imageObj.src=images[i];
 }
 }
}

Can anyone help, please. Thanks in anticipation.

rainborick

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

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

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().

Fotiman

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

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

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.

Tourex

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

10+ Year Member

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.

Tourex

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

10+ Year Member

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.

Thanks!

Fotiman

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

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

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];
document.body.appendChild(img);

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() {
  routine1();
  routine2(); 
  preload([
    'images/image1.jpg',
    'images/image2.jpg',
    'http://example.com/absolute.jpg'
  ]);
}

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