homepage Welcome to WebmasterWorld Guest from 54.161.246.212
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
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
Tourex

10+ Year Member



 
Msg#: 4260163 posted 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() {
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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4260163 posted 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().

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4260163 posted 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.

Tourex

10+ Year Member



 
Msg#: 4260163 posted 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.

Tourex

10+ Year Member



 
Msg#: 4260163 posted 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.

Thanks!

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4260163 posted 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];
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);
}
}

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