ChrisFlynn Posted July 31, 2008 Share Posted July 31, 2008 I found this code to preload images - it works in IE6 and Opera, but not Firefox. Predictably, JSLint hates it. var myimages = new Array(); function preloading() { for (x=0; x<preloading.arguments.length; x++) { myimages[x] = new Image(); myimages[x].src = preloading.arguments[x]; } } preloading("images/tn_thumb1over.jpg", "images/tn_thumb2over.jpg"); preloading("images/tn_thumb2over.jpg", "images/tn_thumb4over.jpg", "images/tn_thumb5over.jpg"); // etc for a total of about 30 rollover images I don't care about keeping this code (which I borrowed from the net anyway). Is there any magic code which anyone can recommend, which I should re-code my page to? Finding 'good' Javascript is pretty impossible, so it'd be great to know what is considered 'best practice'. Here's my criteria: * works for all 3 browsers (IE, FF, Opera - ideally all others too) * doesn't use array indexes by number (I add new images occasionally, and don't want to mess around with changing the array index) * is perhaps even is valid(!) Quote Link to comment Share on other sites More sharing options...
lemmin Posted July 31, 2008 Share Posted July 31, 2008 I am guessing it has something to do with the function.arguments part. Since javascript runs client side, you have to specify the files that you want preloaded. Since you are doing this for rollover images, you can set a property of each image to the rollover one and get the file that way. I don't really have any way to test this but this is what I mean: <html> <head> <script language="JScript"> function preloading() { var imgs = document.getElementsByTagName("img"); for (var i=0;i<imgs.length;i++) new Image().src = imgs[i].name; } </script> </head> <body onload="preloading()"> <img src="test.jpg" name="test2.jpg" id="test.jpg" onmouseover="this.src=this.name" onmouseout="this.src=this.id"> </body> </html> You might need the array of new images like the code you posted, but it might continue downloading without it. Quote Link to comment Share on other sites More sharing options...
obsidian Posted July 31, 2008 Share Posted July 31, 2008 Out of curiosity, have you considered using the CSS sliding doors method of rollovers to avoid having to preload anything with JavaScript? If you create your images appropriately and just shift them with CSS when the mouse is over them, they are all preloaded already... Just a thought. Quote Link to comment Share on other sites More sharing options...
ChrisFlynn Posted July 31, 2008 Author Share Posted July 31, 2008 Out of curiosity, have you considered using the CSS sliding doors method of rollovers to avoid having to preload anything with JavaScript? If you create your images appropriately and just shift them with CSS when the mouse is over them, they are all preloaded already... Just a thought. This interests me - I'll have a google. Thanks for the suggestion! (Incidently, it's with regards to this page > http://keaneshaped.co.uk/disco - feel free to snoop at the code) Quote Link to comment Share on other sites More sharing options...
obsidian Posted July 31, 2008 Share Posted July 31, 2008 This interests me - I'll have a google. Thanks for the suggestion! (Incidently, it's with regards to this page > http://keaneshaped.co.uk/disco - feel free to snoop at the code) Sorry, I had the wrong CSS term applied. This doesn't fall under "sliding doors" at all (that's more for expandable tab or menu items). Just do a Google search for "CSS rollovers" and you'll come up with some really good examples. Quote Link to comment Share on other sites More sharing options...
The Little Guy Posted August 1, 2008 Share Posted August 1, 2008 I find this rather help full (the best example I have found): http://www.findmotive.com/2006/10/31/simple-css-image-rollover/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.