/    Sign up×
Community /Pin to ProfileBookmark

Image preloading with arrays, and file paths

Okay…
I have an HTML file in a folder called “main site”. There are picture URLs in the following code. I need to know if I did it right, or if I need to use absolute urls… The folder “main site” contains a folder called “albums”.
The subfolders of “albums” are band names, each one containing a single .jpg image named “cover.jpg”. Tell me if I did this right. The script is supposed to create an array, and store the file paths in the array. Then, it’s supposed to use a “while” loop to preload the images, and then put them in an array. Now, here’s what I need… Tell me if I did the file paths right, and…

I need a function that I can assign to the “onmouseover” event handler of a [b]bunch[/b] of links… I need to be able to have a function, let’s say.

[code]
function swap(){
document.body.style.backgroundImage.src=”url(parameter)”;
}

I need to pass a parameter in the link:
<a href=”javascript://” onmouseover=”swap(fotos[x])”>Band Name</a>
where “fotos” is the array in my script that the pictures are put into, and you get the “x”.

Can you explain how to do that? I’d really like to use the array, instead of using onmouseover=”swap(freakin’ long file path)”
[/code]

So, here’s my script so far. If I did [b]ANYTHING[/b] wrong so far, tell me.
I have a week or two to get this working. (the whole purpose of the script is to swap the background image depending on what link the user hovers over. Thus, the preloading…)

Here’s what I’ve got. If It’s wrong TELL ME SO, please. Thank you.

[code]
// JavaScript Document

//Script to preload images
//Create array
pics = new Array();
pics[0]=”/albums/3_doors_down/cover.jpg”;
pics[1]=”/albums/ac_dc/cover.jpg”;
pics[2]=”/albums/aiden/cover.jpg”;
pics[3]=”/albums/all_american_rejects/cover.jpg”;
pics[4]=”/albums/anthrax/cover.jpg”;
pics[5]=”/albums/black_eyed_peas/cover.jpg”;
pics[6]=”/albums/black_sabbath/cover.jpg”;
pics[7]=”/albums/blue_october/cover.jpg”;
pics[8]=”/albums/bob_dylan/cover.jpg”;
pics[9]=”/albums/brad_paisley/cover.jpg”;
pics[10]=”/albums/bush/cover.jpg”;
pics[12]=”/albums/coheed_and_cambria/cover.jpg”;
pics[13]=”/albums/creed/cover.jpg”;
pics[14]=”/albums/ccr/cover.jpg”;
pics[15]=”/albums/csn/cover.jpg”;
pics[16]=”/albums/evanescence/cover.jpg”;
pics[17]=”/albums/fmstatic/cover.jpg”;
pics[18]=”/albums/green_day/cover.jpg”;
pics[19]=”/albums/gnr/cover.jpg”;
pics[20]=”/albums/hawthorne_heights/cover.jpg”;
pics[21]=”/albums/hoobastank/cover.jpg”;
pics[22]=”/albums/priest/cover.jpg”;
pics[23]=”/albums/coil/cover.jpg”;
pics[24]=”/albums/zeppelin/cover.jpg”;
pics[25]=”/albums/lenny_kravitz/cover.jpg”;
pics[26]=”/albums/skynyrd/cover.jpg”;
pics[27]=”/albums/megadeth/cover.jpg”;
pics[28]=”/albums/metallica/cover.jpg”;
pics[29]=”/albums/motorhead/cover.jpg”;
pics[30]=”/albums/nirvana/cover.jpg”;
pics[31]=”/albums/quiet_riot/cover.jpg”;
pics[32]=”/albums/relient_k/cover.jpg”;
pics[33]=”/albums/slayer/cover.jpg”;
pics[34]=”/albums/beach_boys/cover.jpg”;
pics[35]=”/albums/beatles/cover.jpg”;

var i = 0;
var j = 0;
// ^ Declare increment variable
while(i < pics.length){
image1 = new Image();
fotos = new Array()
fotos[j] = pics[i];
// ^ Create a new image in cache
image1.src = pics[i];

// ^ Set new image source to the image path
// provided in pics[i], where “i” references
// the array element with the same value
// as the increment variable “i”
i++;
j++;
// Shorthand for “i = i + 1”, which mathematically
// adds the number 1 to “i”, so that on the next
// loop iteration, the image source is set to the
// value of the next array element
//
//
}

// ^ Script to preload images from
// values of elements contained in
// the “pics” array

// End image preloading script
[/code]

If I did the file paths wrong, please let me know immediately.
I have no idea how to handle file paths in javascript… I’ve only ever
swapped images that are in the same directory… 😮

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@comingbackdownauthorMar 18.2007 — Okay, disregard my previous post. The code in it is defective, buggy, and

plainly just wrong. So, I fixed it, kinda. Here's what I have in my new

Javascript file:

<i>
</i>// JavaScript Document


// Creates new array, holding locations of pictures for
// background swap function, named "swap()"
pics=new Array();
pics[0]="url('/albums/3_doors_down/cover.jpg')";
pics[1]="url('/albums/ac_dc/cover.jpg')";
pics[2]="url('/albums/aiden/cover.jpg')";
pics[3]="url('/albums/all_american_rejects/cover.jpg')";
pics[4]="url('/albums/anthrax/cover.jpg')";
pics[5]="url('/albums/black_eyed_peas/cover.jpg')";
pics[6]="url('/albums/black_sabbath/cover.jpg')";
pics[7]="url('/albums/blue_october/cover.jpg')";
pics[8]="url('/albums/bob_dylan/cover.jpg')";
pics[9]="url('/albums/brad_paisley/cover.jpg')";
pics[10]="url('/albums/bush/cover.jpg')";
pics[11]="url('/albums/coheed_and_cambria/cover.jpg')";
pics[12]="url('/albums/creed/cover.jpg')";
pics[13]="url('/albums/ccr/cover.jpg')";
pics[14]="url('/albums/csn/cover.jpg')";
pics[15]="url('/albums/evanescence/cover.jpg')";
pics[16]="url('/albums/fmstatic/cover.jpg')";
pics[17]="url('/albums/green_day/cover.jpg')";
pics[18]="url('/albums/gnr/cover.jpg')";
pics[19]="url('albums/hawthorne_heights/cover.jpg')";
pics[20]="url('/albums/hoobastank/cover.jpg')";
pics[21]="url('/albums/priest/cover.jpg')";
pics[22]="url('/albums/coil/cover.jpg')";
pics[23]="url('/albums/zeppelin/cover.jpg')";
pics[24]="url('/albums/lenny_kravitz/cover.jpg')";
pics[25]="url('/albums/skynyrd/cover.jpg')";
pics[26]="url('/albums/megadeth/cover.jpg')";
pics[27]="url('/albums/metallica/cover.jpg')";
pics[28]="url('/albums/motorhead/cover.jpg')";
pics[29]="url('/albums/nirvana/cover.jpg')";
pics[30]="url('/albums/quiet_riot/cover.jpg')";
pics[31]="url('/albums/relient_k/cover.jpg')";
pics[32]="url('/albums/slayer/cover.jpg')";
pics[33]="url('/albums/beach_boys/cover.jpg')";
pics[34]="url('/albums/beatles/cover.jpg')";


// Swaps background image for the file path
// contained in the parameter "loc",
// where loc is an array element in
// the "pics" array look for the
// parameter to be set in the
// "onmouseover" event handler used
// in the HTML file to which this
//script is attached
function swap(loc){
document.body.style.backgroundImage = loc;
}

// Changes the background image back to the original,
// use on the "onmouseout" event handler in the
// HTML file to which this script is attached
function swapout(){
document.body.style.backgroundImage = "url(images/instone.jpg)";
}



now, here is my question.

I need to preload every single one of those images.

Can I use a loop with the existing array to do that?

If not, do I need to preload them with another array and loop?

If I do, will I still be able to access the images with the "pics" array

without a lag time due to the image loading?

I tried using an array and a function to swap background images, and

the only way I can get it to work is to use the file paths like I used in the

"pics" array above. So, can I preload using that array and a loop (preferable a "while" or "for" loop)? Or do I need another array with the regular "/folder/folder/example.jpg" file paths to use for preloading? If I do have to use another array, will I be able to use the original with the above code plus the loop and not have loading lag?

Now that I know how to use a piece of an array as a parameter in [b]this[/b]

situation, I'm wondering if I can preload using that array.

Any help is appreciated... Boy do I feel dumb for all the bugs in my previous code... :o
Copy linkTweet thisAlerts:
@ricpMar 18.2007 — There are lots of preloaders out there, so a simple google will get you tons of tutorials. Here's one way:

<i>
</i> var oImg = {
count: 0,
images: [
{path:'/albums/3_doors_down/cover.jpg', success: false },
{path:'/albums/ac_dc/cover.jpg', success: false },
{path:'/albums/aiden/cover.jpg', success: false },
{path:'/albums/all_american_rejects/cover.jpg', success: false },
{path:'/albums/anthrax/cover.jpg', success: false },
{path:'/albums/black_eyed_peas/cover.jpg', success: false },
{path:'/albums/black_sabbath/cover.jpg', success: false },
{path:'/albums/blue_october/cover.jpg', success: false },
{path:'/albums/bob_dylan/cover.jpg', success: false },
{path:'/albums/brad_paisley/cover.jpg', success: false },
{path:'/albums/bush/cover.jpg', success: false },
{path:'/albums/coheed_and_cambria/cover.jpg', success: false },
{path:'/albums/creed/cover.jpg', success: false },
{path:'/albums/ccr/cover.jpg', success: false },
{path:'/albums/csn/cover.jpg', success: false },
{path:'/albums/evanescence/cover.jpg', success: false },
{path:'/albums/fmstatic/cover.jpg', success: false },
{path:'/albums/green_day/cover.jpg', success: false },
{path:'/albums/gnr/cover.jpg', success: false },
{path:'/albums/hawthorne_heights/cover.jpg', success: false },
{path:'/albums/hoobastank/cover.jpg', success: false },
{path:'/albums/priest/cover.jpg', success: false },
{path:'/albums/coil/cover.jpg', success: false },
{path:'/albums/zeppelin/cover.jpg', success: false },
{path:'/albums/lenny_kravitz/cover.jpg', success: false },
{path:'/albums/skynyrd/cover.jpg', success: false },
{path:'/albums/megadeth/cover.jpg', success: false },
{path:'/albums/metallica/cover.jpg', success: false },
{path:'/albums/motorhead/cover.jpg', success: false },
{path:'/albums/nirvana/cover.jpg', success: false },
{path:'/albums/quiet_riot/cover.jpg', success: false },
{path:'/albums/relient_k/cover.jpg', success: false },
{path:'/albums/slayer/cover.jpg', success: false },
{path:'/albums/beach_boys/cover.jpg', success: false },
{path:'/albums/beatles/cover.jpg', success: false }
]
}

<i> </i> function loadImages(forceLoad) {
<i> </i> var imageObject = new Image();
<i> </i> imageObject.onload = function() { setLoadStatus(true); }
<i> </i> imageObject.onerror = function() { setLoadStatus(false); }
<i> </i> imageObject.src = oImg.images[oImg.count].path + forceLoad?"?"+new Date().getTime():"";
<i> </i> }

<i> </i> function setLoadStatus(status) {
<i> </i> oImg.images[oImg.count].success = status;
<i> </i> oImg.count++;
<i> </i> if (oImg.count!=oImg.images.length)
<i> </i> loadImages();
<i> </i> else
<i> </i> showLoadStatus();
<i> </i> }

<i> </i> function showLoadStatus() {
<i> </i> for (var i=0;i&lt;oImg.images.length;i++) {
<i> </i> alert("image: "+oImg.images[i].path+"nnload: "+oImg.images[i].success);
<i> </i> }
<i> </i> }

<i> </i> loadImages();

As you'll see from that I hold everything in an object which has a child array with the paths plus a success flag (more about this later). The object also has a counter built in.

Each image array item is created into a image object and has the onload/onerror set [b]before[/b] the .src property is applied (it's important to do it in that order). These events then feed back to the success flag of the image you are loading, plus they trigger off the next image in the array. Once all the images have been set, then the script calls a check to show you which images loaded.

Obviously the last bit, and the success flag, is more for debugging purposes but I thought I would put it in anyway.

One thing to note about preloaders. When testing, test on images from a remote server. I have had numerous occassions where the new Image object "refuses" to see the path if it's local. I am guessing this is probably cache related and the script will work fine if tested via remote or via your own hosting.

Oh, and talking of cache, I have built in a specific "force load" option, which could be used if you have images constantly changing. Not sure when that would be applicable but no harm in it being there. To trigger it, just pass any value into the function other than "null","false","0" or any other conditional negative value. If you don't pass anything and simply kick off, loadImages(), then the browser will pick up from the cache.

Hope that helps.
Copy linkTweet thisAlerts:
@comingbackdownauthorMar 19.2007 — There are lots of preloaders out there, so a simple google will get you tons of tutorials. Here's one way:

<i>
</i> var oImg = {
count: 0,
images: [
{path:'/albums/3_doors_down/cover.jpg', success: false },
{path:'/albums/ac_dc/cover.jpg', success: false },
{path:'/albums/aiden/cover.jpg', success: false },
{path:'/albums/all_american_rejects/cover.jpg', success: false },
{path:'/albums/anthrax/cover.jpg', success: false },
{path:'/albums/black_eyed_peas/cover.jpg', success: false },
{path:'/albums/black_sabbath/cover.jpg', success: false },
{path:'/albums/blue_october/cover.jpg', success: false },
{path:'/albums/bob_dylan/cover.jpg', success: false },
{path:'/albums/brad_paisley/cover.jpg', success: false },
{path:'/albums/bush/cover.jpg', success: false },
{path:'/albums/coheed_and_cambria/cover.jpg', success: false },
{path:'/albums/creed/cover.jpg', success: false },
{path:'/albums/ccr/cover.jpg', success: false },
{path:'/albums/csn/cover.jpg', success: false },
{path:'/albums/evanescence/cover.jpg', success: false },
{path:'/albums/fmstatic/cover.jpg', success: false },
{path:'/albums/green_day/cover.jpg', success: false },
{path:'/albums/gnr/cover.jpg', success: false },
{path:'/albums/hawthorne_heights/cover.jpg', success: false },
{path:'/albums/hoobastank/cover.jpg', success: false },
{path:'/albums/priest/cover.jpg', success: false },
{path:'/albums/coil/cover.jpg', success: false },
{path:'/albums/zeppelin/cover.jpg', success: false },
{path:'/albums/lenny_kravitz/cover.jpg', success: false },
{path:'/albums/skynyrd/cover.jpg', success: false },
{path:'/albums/megadeth/cover.jpg', success: false },
{path:'/albums/metallica/cover.jpg', success: false },
{path:'/albums/motorhead/cover.jpg', success: false },
{path:'/albums/nirvana/cover.jpg', success: false },
{path:'/albums/quiet_riot/cover.jpg', success: false },
{path:'/albums/relient_k/cover.jpg', success: false },
{path:'/albums/slayer/cover.jpg', success: false },
{path:'/albums/beach_boys/cover.jpg', success: false },
{path:'/albums/beatles/cover.jpg', success: false }
]
}

<i> </i> function loadImages(forceLoad) {
<i> </i> var imageObject = new Image();
<i> </i> imageObject.onload = function() { setLoadStatus(true); }
<i> </i> imageObject.onerror = function() { setLoadStatus(false); }
<i> </i> imageObject.src = oImg.images[oImg.count].path + forceLoad?"?"+new Date().getTime():"";
<i> </i> }

<i> </i> function setLoadStatus(status) {
<i> </i> oImg.images[oImg.count].success = status;
<i> </i> oImg.count++;
<i> </i> if (oImg.count!=oImg.images.length)
<i> </i> loadImages();
<i> </i> else
<i> </i> showLoadStatus();
<i> </i> }

<i> </i> function showLoadStatus() {
<i> </i> for (var i=0;i&lt;oImg.images.length;i++) {
<i> </i> alert("image: "+oImg.images[i].path+"nnload: "+oImg.images[i].success);
<i> </i> }
<i> </i> }

<i> </i> loadImages();

As you'll see from that I hold everything in an object which has a child array with the paths plus a success flag (more about this later). The object also has a counter built in.

Each image array item is created into a image object and has the onload/onerror set [b]before[/b] the .src property is applied (it's important to do it in that order). These events then feed back to the success flag of the image you are loading, plus they trigger off the next image in the array. Once all the images have been set, then the script calls a check to show you which images loaded.

Obviously the last bit, and the success flag, is more for debugging purposes but I thought I would put it in anyway.

One thing to note about preloaders. When testing, test on images from a remote server. I have had numerous occassions where the new Image object "refuses" to see the path if it's local. I am guessing this is probably cache related and the script will work fine if tested via remote or via your own hosting.

Oh, and talking of cache, I have built in a specific "force load" option, which could be used if you have images constantly changing. Not sure when that would be applicable but no harm in it being there. To trigger it, just pass any value into the function other than "null","false","0" or any other conditional negative value. If you don't pass anything and simply kick off, loadImages(), then the browser will pick up from the cache.

Hope that helps.[/QUOTE]


One question... How the heck do I access the images?

I can understand a pretty good chunk of that script, but I have no idea

how to access the images with it. Once they're preloaded, I need to be

able to swap the background image among them. Basically, I need my "onmouseover" to swap the original background with the picture that has the same name as the link. So, if the user moves the mouse over the link that's represented in text as "Aiden", it needs to swap the background with that picture, and the "onmouseout" needs to switch it back to the original. Also, if I decide not to have an original background image, how do I swap from no background, to a background, and back?

If you can answer that, I'll be set. I don't know enough JS to know how to do all of this stuff... I'm only so far through my book, and I practice things in practical use before I move on to the next chapter.
Copy linkTweet thisAlerts:
@ricpMar 19.2007 — It depends really. Once an image is loaded, it's in the cache, so if you are doing a rollover, you could simply reference the path string in the oImg.images[index].path however in your example code it's not obvious what the rollover states are meant to show (there is on image1.jpg and image1_over.jpg for example) so I couldn't say exactly how to tie it up with an element, but in general using an id as some reference to the oImg.images array.

I would need to see more of the code and how you intend to use it before answering more.

Now, actually, looking back over your pasted code in #2, you know you can implement rollovers utilising the background-image css property without using javascript at all. It involves using one background image that is the two images aligned and the rollover (picked up via the :hover) simply sets the background position, "scrolling" the required image into view. ALA did an article on it I think, I'll try and find it.

edit: http://wellstyled.com/css-nopreload-rollovers.html
Copy linkTweet thisAlerts:
@ZnupiMar 25.2007 — ricp, have you tested your script with Opera?... I tried something similar but it seems Opera can't handle object.onload... Or am I mistaking? Firefox and IE work fine, Opera is the only one not responding to object.onload ?
×

Success!

Help @comingbackdown spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...