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

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

    Thank you, thank you, thank you!

  2. User Avatar
    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. User Avatar
    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. User Avatar
    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

    • User Avatar
      Lance Williams

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

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

    • User Avatar
      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
      $.preloadImages("1,2");

    • User Avatar
      Knows Everything
      Permalink to comment#

      When all images are in the same folder simply:

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

    • User Avatar
      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.

    • User Avatar
      orly
      Permalink to comment#

      Way to stroke that epeen QS. Stroke it, stroke it real good.

  5. User Avatar
    Rob Salaman
    Permalink to comment#

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

  6. User Avatar
    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. User Avatar
    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. User Avatar
    Aurelien
    Permalink to comment#

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

  9. User Avatar
    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. User Avatar
    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

    • User Avatar
      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:

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

  11. User Avatar
    ElGoates
    Permalink to comment#

    This is just what I needed!

  12. User Avatar
    Chris Peck
    Permalink to comment#

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

    http://www.photo-mark.com/notes/image-preloading/

  13. User Avatar
    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]);
    
  14. User Avatar
    Francis
    Permalink to comment#

    How about the url(”); what is the script for this ? can you help me thanks :)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag