So, any advanced javascript coders here?

Ok, I was thinking. (It rare but well... you know, **** happens )

I wrote a small script to preload images for my website.
All my images are in the same map (www.styl-x.com) /images
Now I was wondering, instead of having 30 lines of code for each single image, isn't it possible to replace all those lines and have one line preloading "/image" instead of
/images/background.jpg
/images/button.jpg
/images/buttonover.jpg.... (you get the idea )

thanks.
2,374 views 8 replies
Reply #1 Top

I don't think so, but you can preload all your images in your single script, instead of repeating the script for every image. Or you can write the script in a function and call the function on every image, but the first way is better. But then again, I don't know the context exactly.

Reply #2 Top

Maybe you mean that your script has 30 lines, and you want to know if there is a way to reduce it to two lines?
If that's the case, I don't think so. It's about two lines per image, and as far as I know you have to write it for every image:

if (document.images)
{
  pic1= new Image()
  pic1.src="http://someplace.com/image1.gif"

  pic2= new Image()
  pic2.src="http://someplace.com/image2.gif"

  pic3= new Image()
  pic3.src="http://someplace.com/image3.gif"

  (and so on for every image)
 
}

BTW: you could do without the IF statement. It's there for older browsers that don't support the image object. If you leave it out, older browsers will get a javascript error.


[Message Edited]
Reply #3 Top
well, I've not done any image preloading in a while but if you don't need to re-use the image objects you can create an array with all of your image names like so:

var myArray = new Array("image1.jpg", :image2.jpg", "image3.jpg", etc...)^

Then, you can have a function loop through the array loading each image as it goes:

for(var i = 0^ i < myArray.length^ i++) {
var tPic = new Image()^
tPic.src = "http://yoururl.com/images/" + myArray[i]^
}

This basically accomplishes the same thing as Paxx's code but the image object is re-initialized each time through the loop. Since the purpose of pre-loading is only to get the browser to load the images at the beginning of page load this should do what you need.. Hope this helps!

Since semi-colons get stripped in posts you'll need to replace the carat's (^) with semi-colons..
[Message Edited]
Reply #4 Top
f0r3 has a good idea, but in my example image1.gif, image2.gif, image3.gif were only examples of what your images could be called.  For f0r3's code to work, your images would actually need to be named sequentially like that. If you don't mind renaming your images that way, then yes, you can save a lot of codinglines with the above, especially if you got hundreds of images.
Reply #5 Top
looks good, let me check it out. Well, it aren't hundreds of images but my webpage just has about 30 images (2-3 KB Most of them). I am hosting my server myself and just want to speed things up as it will take about 5 seconds to load my page now.
Reply #6 Top
actually, they wouldn't need to be named anything special.. The only requirement would be that the names be in the array. I was simply following your naming convention but the code will work with an array like:

myArray = new Array("bob.jpg", "jane.jpg", "bill.jpg", "bluesky.jpg")

This would cause each image to be loaded one after the other.
Reply #7 Top
Oh yeah, true enough. I looked too quickly. I thought the name of the image was in the loop, like "image"+ i +".gif" or something. Well, that's another way of doing it, but that time your image name definately would need to be sequential.
Reply #8 Top
Looks good tought, thanks for the help, I appreciate it.