Home › Forums › General Webmaster Forum ›

Preload images with JavaScript or CSS

Submitted by Anonymous on Fri, 03/05/2010 - 12:11

I have a small website with two background images for top menu. When I bring mouse first time over a menu element it takes 2-3 seconds that second background image loaded (style link:hover background: url(secondimg.png)). For this short time user see nothing, of course it is annoying. To escape this situation I want to preload all images inklusive background images for menu elements, links, divs etc. Is there a very easy and short javascript or css trick? Thanks for any help!

Bookmark/Search this post with:
  • Delicious
  • Digg
  • StumbleUpon
  • Propeller
  • Reddit
  • Newsvine
  • Facebook
  • Google
  • Yahoo
  • Technorati
  • Icerocket
‹ Could not fetch uid or gid for : root (Cpanel / WHM) Function ereg() is deprecated in C:\wamp\www\drupal\includes\file.inc on line 902 ›
Tags:
Submitted by Anonymous (not verified) on Fri, 03/05/2010 - 12:17.

To load images before scripts run just put such as js code between your head tags.

<script language="javascript">

image_1 = new image(1,1);
image_1.src = "full/path/to/your/first/photo.jpg";

image_2 = new image(1,1);
image_2.src = "http://example.com/path/to/your/second/picture.png";

image_3 = new image(1,1);
image_3.src = "http://example.com/another/graphic.gif";

</script>

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Use <pre> all your html php come here </pre> for your code
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <b> <pre> <h1> <h2> <h3> <h4> <h5> <h6> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <div> <style><img> <br> <blockquote>
  • Lines and paragraphs break automatically.
  • You may insert videos with [video:URL]

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters (without spaces) shown in the image.

CafeWebmaster.com(CW) is a free online community for webdevelopers and beginners. Anybody can share their code, articles, tips, tutorials, code-examples or other webdesign related material on the site. Newbies can submit their questions and reply to existing questions. CW does not guarantee or warrant reliability of code, data and information published on the site. Use the site on your own risk. The site takes no responsibility of direct or indirect loss or any kind of harm to its users. The site also doesn't take responsibility of infected files or source code with any kind of infection or viruses, worms, spywares, malwares, trojan horses. CW reserves the right to edit, move, or delete any of content for any reason.