So, any advanced javascript coders here?

Friday, August 13, 2004 by Styl-X Design | Discussion: WinCustomize Talk

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.
paxx
Reply #1 Friday, August 13, 2004 8:32 PM

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.

paxx
Reply #2 Friday, August 13, 2004 9:35 PM

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="//someplace.com/image1.gif"

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

  pic3= new Image()
  pic3.src="//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]
Kevin_C
Reply #3 Friday, August 13, 2004 9:53 PM
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]
paxx
Reply #4 Friday, August 13, 2004 10:01 PM
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.
Styl-X Design
Reply #5 Saturday, August 14, 2004 6:59 AM
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.
Kevin_C
Reply #6 Saturday, August 14, 2004 7:15 AM
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.
paxx
Reply #7 Saturday, August 14, 2004 9:43 AM
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.
Styl-X Design
Reply #8 Saturday, August 14, 2004 9:58 AM
Looks good tought, thanks for the help, I appreciate it.

Please login to comment and/or vote for this skin.

Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:

  • Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
  • Access to a great community, with a massive database of many, many areas of interest.
  • Access to contests & subscription offers like exclusive emails.
  • It's simple, and FREE!



web-wc01