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

  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

Leave a Comment

Current day month ye@r *

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