The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Image Preloader

Last updated on:

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. Catherine Azzarello
    Permalink to comment#

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

    Thank you, thank you, thank you!

  2. Jack
    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. Benjamin Mayo
    Permalink to comment#

    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 ?


    • Lance Williams

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

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

    • Vesso
      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

    • Knows Everything
      Permalink to comment#

      When all images are in the same folder simply:

      $("").attr("src", "images/nav/".arguments[i]);

    • QS
      Permalink to comment#

      Lance: if you’re programming in JavaScript for the Web, and you don’t know what ‘$’ is, ask yourself if you shouldn’t maybe pick up a book on front-end Web development for beginners. ‘$’ is provided by jQuery — an extremely ubiquitous library. Hopefully you’ve learned that in the 3 years since your post.

  5. Rob Salaman
    Permalink to comment#

    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

    • Miguel
      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:


  11. ElGoates
    Permalink to comment#

    This is just what I needed!

  12. Chris Peck
    Permalink to comment#

    A good case can be made that preloading everything in one quick loop is not always the best option:

  13. den bubencode
    Permalink to comment#

    The suggestion to use simpler function version when all images are in the same folder (by ‘Knows Everything’ as of #NOVEMBER 26, 2014) works – but with ‘+’ instead of ‘.’ – like this:

    $("<img />").attr("src", "images/nav/"+arguments[i]);

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed