shadowayex Posted October 20, 2009 Share Posted October 20, 2009 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 More sharing options...
jeffman Posted October 20, 2009 Share Posted October 20, 2009 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. Link to comment Share on other sites More sharing options...
shadowayex Posted October 21, 2009 Author Share Posted October 21, 2009 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 More sharing options...
shadowayex Posted October 22, 2009 Author Share Posted October 22, 2009 Alright, I've got that code, my one question is this:Will I have to load that every time the page is refreshed? Or is it a one time works all session thing? Link to comment Share on other sites More sharing options...
jeffman Posted October 22, 2009 Share Posted October 22, 2009 Far as I know, the images will stay cached. Link to comment Share on other sites More sharing options...
shadowayex Posted October 22, 2009 Author Share Posted October 22, 2009 Alright, so I pretty much need to load it once, and find a way for my pages to recognize that they've already been loaded so it doesn't try to do it every time. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 22, 2009 Share Posted October 22, 2009 The server and browser should handle that automatically. There are tools you can use to see which resources are coming from the cache and which are coming from the server, including Firebug. Link to comment Share on other sites More sharing options...
shadowayex Posted October 22, 2009 Author Share Posted October 22, 2009 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 More sharing options...
justsomeguy Posted October 22, 2009 Share Posted October 22, 2009 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 More sharing options...
shadowayex Posted October 22, 2009 Author Share Posted October 22, 2009 Oh =D. It's working like it's supposed to.I didn't have that one enabled. Thanks. That tab will come in handy =D. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.