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]);



  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 ?


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

  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.

  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 …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:


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.
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
  • 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".