|
|||||||
| JavaScript JavaScript (not Java) Discussion and technical support, including AJAX and frameworks (JQuery, MooTools, Prototype...) |
 |
|
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
#1
03-17-2007, 11:12 PM
|
||||
|
||||
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 bunch 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)"
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
I have no idea how to handle file paths in javascript... I've only ever swapped images that are in the same directory... 
__________________
I know a guy who told me "HTML sucks! I could live without it!" My reply was "Without HTML, your browser would be useful for jack squat." "But... But... Flash animat" "My ***..." 
|
|
#2
03-18-2007, 06:04 AM
|
||||
|
||||
|
Wow... I did a bad job...
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: Code:
// 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)";
}
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 this 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...
__________________
I know a guy who told me "HTML sucks! I could live without it!" My reply was "Without HTML, your browser would be useful for jack squat." "But... But... Flash animat" "My ***..."
|
|
#3
03-18-2007, 07:21 AM
|
||||
|
||||
|
There are lots of preloaders out there, so a simple google will get you tons of tutorials. Here's one way:
Code:
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 }
]
}
function loadImages(forceLoad) {
var imageObject = new Image();
imageObject.onload = function() { setLoadStatus(true); }
imageObject.onerror = function() { setLoadStatus(false); }
imageObject.src = oImg.images[oImg.count].path + forceLoad?"?"+new Date().getTime():"";
}
function setLoadStatus(status) {
oImg.images[oImg.count].success = status;
oImg.count++;
if (oImg.count!=oImg.images.length)
loadImages();
else
showLoadStatus();
}
function showLoadStatus() {
for (var i=0;i<oImg.images.length;i++) {
alert("image: "+oImg.images[i].path+"\n\nload: "+oImg.images[i].success);
}
}
loadImages();
Each image array item is created into a image object and has the onload/onerror set before 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.
__________________
Essential Links: DOM | JS | CSS --- #javascript on EfNet: Direct Link --- I've known you since you were a twenty, and I was twenty, and thought that some years from now, a purple little, little, lady will be perfect, for this dirty old and useless clown... Gogol Bordello
|
|
#4
03-19-2007, 01:57 AM
|
||||
|
||||
|
Quote:
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.
__________________
I know a guy who told me "HTML sucks! I could live without it!" My reply was "Without HTML, your browser would be useful for jack squat." "But... But... Flash animat" "My ***..."
|
|
#5
03-19-2007, 06:17 PM
|
||||
|
||||
|
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
__________________
Essential Links: DOM | JS | CSS --- #javascript on EfNet: Direct Link --- I've known you since you were a twenty, and I was twenty, and thought that some years from now, a purple little, little, lady will be perfect, for this dirty old and useless clown... Gogol Bordello Last edited by ricp; 03-19-2007 at 06:23 PM.
|
|
#6
03-25-2007, 06:25 PM
|
||||
|
||||
|
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
__________________
A Programmer's Ride ↳ Pagination with Smarty ↳ Use MySQL and PHP to find what country an IP comes from
|
|
| Bookmarks |
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
Linear Mode
