jquery add image to browser cache

By Sam Deering

This is how you might preloading images using jQuery to add the images to browser cache (as part of a DOM div element which is hidden).

(function($,D,W) {

    var JQUERY4U = {};


            loadingImage: 'loading',
            ajaxImage: '',
            savingImage: 'saving'

        preloadImages: function()
  • Pingback: polux7 – jquery add image to browser cache()

  • Rodrigo Hernando

    Hi Sam,

    One question regarding this.

    I’m planing in use one image for multiple elements, what’s the best option, is image caching option, add the img tag or as a background image through the css markup?.

    Thanks for all the amazing resources on your blog.

    • jQuery4u

      If the image src is the same then the browser will cache it automatically. If you want to preload it however adding it to the DOM in the background simulates this. If you want to load upon view then maybe look at some lazy loading scripts.

      • Rodrigo Hernando

        Thank you, I’ve checked with dev tools and firebug and you’re right the browser does just one request, so i just put the the url in a variable preload it (I’m actually using around 8 to 12 images and each img in different div elements).

        Thank you again for your time and your excellent blog.




Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.