Grow your CSS skills. Land your dream job.

Last updated on:

Image Preloader

Very easy way to preload images which are needed later (e.g. when a hover is performed)

$.preloadImages = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}

$.preloadImages("hoverimage1.jpg","hoverimage2.jpg");

Comments

  1. Chris–this library is awesome–both in content and organization!

    Thank you, thank you, thank you!

  2. Permalink to comment#

    Thanks so much chris, just what I needed. Finally got round to implementing it today. Check out the linked site to see how I used it. My first full project, so a lot is wrong, but I’ve learned a lot and more recent projects have been much better because of it.

  3. Theres a case for jQuery here, but no need to attach preloadImages to the $ namespace. Semantically I feel it should be left it as it’s own function.

  4. Michael O'Neill
    Permalink to comment#

    What do I do if I want to preload images that are in a folder. For example on my site I have all my images in a folder called images and the images I want to preload in a folder called nav. How do I target these ?

    Do I simply do the following ?
    $.preloadImages("images/nav/1.jpg","images/nav/2.jpg")

    Thanks,
    Micky

    • I have the same question. Is there an answer anywhere?

      This is all I get.
      ReferenceError: Can’t find variable: $

    • Permalink to comment#

      That is exactly what you need to do.
      However, if the path to all image files is one and the same, you’d better include it into the function rather than writing it for each image in the argument list. The same applies for the file name extension. So you may end up only with
      $.preloadImages("1,2");

  5. Thanks Chris,
    This is really helpful it’s exactly what I was looking for.
    Rob.

  6. Jase
    Permalink to comment#

    Thanks for the post. For folks that use your site as the quintessential reference for all things HTML/CSS, perhaps you could revisit this post to include support for cached images in Internet Explorer as well as sequential loading. A proper jQuery plugin architecture would also be really great.
    Thanks again for all your work/insight.
    -jase

  7. ryan m taylor
    Permalink to comment#

    I think you want to check if(document.image) and then create images by “new Image(imageSourceName)”. Also look at http://docs.jquery.com/Plugins/Authoring …anyways, cool blog!

  8. Aurelien
    Permalink to comment#

    So simple! I love it! Thank you :) :) :)

  9. Paul
    Permalink to comment#

    I am getting a browser javascript error in MSIE that says, “‘$’ is undefined” on the 2nd line of the code:

    **$.preloadImages = function()**
    

    Am I missing something?

  10. tim
    Permalink to comment#

    does this also work for background images?
    how would i change the script to pre-load bg images please.

    thank you

    • Permalink to comment#

      @tim, it works exactly the same way for background images. You just need to put the image link in the list of images being preloaded:

      $.preloadImages(“hoverimage1.jpg”,”hoverimage2.jpg”,”backgroundimage1.png”,”backgroundimage2.png”);

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".