Jump to content

Javascript Image Switch - Very Slow


shadowayex
 Share

Recommended Posts

Ok, let me explain what's going on.I'm using JavaScript to switch the src of an image for onmouseover, onmouseout, onmousedown, and onmouseup. Easy enough. Works fine the way I have it. Here's my problem.The page itself already takes a bit to load (because of all the images I use). But when the effects are used for the first time that visit, JavaScript has to download the image right then. That makes it so the effect the image switch is supposed to give does not really work out unless they hover over it for a while. After the initial download, it works fine.I have two questions, one concerning that and one concerning design in general.Firstly, is there any way to have the images all downloaded on the original request? That way the image switcher already has the images downloaded. I've thought of different ways, but they all seem like really bad hacks that should be avoided.And secondly, what's better to use when making image driven layouts (banners, navigations bars, etc.): image tags or elements with background images? I would assume image tags, but I've seen the use of background images before as well.

Link to comment
Share on other sites

1. We just had a thread on this. Since you're using JavaScript anyway, just preload your images. That looks like this:my_images[0] = new Image();my_images[0].src = "images/some.gif";It doesn't have to be stored in an array, but I meant to suggest you could put the thing in a loop and simplify the task for an indefinite number of images. If the URLs are stored in another array, the code can be very short.The whole point is to get the actual image data in RAM, so when you need it, it's there. It doesn't have to be displayed first to be in RAM.2. Alternatively, use sprites. Especially good for buttons and icons. Google it. The point is that when one image file down loads, multiple "images" download at the same time. Rollovers and :hovers just change their presentation coordinates. Some authors put ALL their button and icon "images" into one big image file. This has the added benefit that during slower downloads, your buttons and icons don't pop randomly into existence, but appear all at once, together. A much cleaner presentation.3. Background images are preferable when the image is non-semantic, that is, when it's not really page content, but just window dressing, like a button.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Alright, I new there was a way to pre-load images, I just didn't know how. Thanks for the function.And with the background images, that makes sense. When I get home I'll test out the code and see if it makes the thing load faster. I'm sure it will.Thanks again.

Link to comment
Share on other sites

I'm slightly confused about what you mean.I have a function that actually has too pre-load 30 images. The function is called each time a page is loaded that needs those images.Does JavaScript know that after the first time, it can just pull the image from the cache?And about figuring out where the image is loaded from, how is that done? I have Firebug, I just don't know how to accomplish what you're talking about.

Link to comment
Share on other sites

Javascript doesn't do anything, Javascript tells the browser it needs a certain resource and the browser and server together figure out if the browser can use a local version or if the version on the server is newer. In the Net tab in Firebug you can see the requests for each resource, a 304 request from the server means the browser already has the current version. At the bottom of the Net tab you can see the total file size and the size loaded from cache.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...