370

Is the function I wrote below enough to preload images in most, if not all, browsers commonly used today?

function preloadImage(url)
{
    var img=new Image();
    img.src=url;
}

I have an array of image URLs that I loop over and call the preloadImage function for each URL.

17
  • 28
    Note that some (all?) browsers will release the image after some seconds if you haven't used it. To avoid this, keep a reference to the img object, e.g. in an array in the parent scope.
    – Tamlyn
    Oct 13, 2014 at 13:14
  • 6
    What do you mean by "release the image"? If it was cached by the browser, it will stay there, right?
    – Francisc
    Oct 17, 2014 at 19:07
  • 66
    A bit shorter: (new Image()).src = url; Oct 23, 2014 at 10:56
  • 38
    note this won't work when chrome devtool is open and 'disable chache' is enabled within the network panel
    – 牛さん
    Jan 24, 2017 at 4:11
  • 18
    Even shorter: new Image().src = url; Dec 5, 2017 at 17:29

18 Answers 18

276

Yes. This should work on all major browsers.

1
  • 124
    Moderator Note: Please stop flagging this as "not an answer". It is, in fact, a direct answer to the question that was asked. If you think the answer is wrong, or insufficiently supported with evidence, then downvote it.
    – Cody Gray
    Mar 20, 2019 at 7:29
61

Try this I think this is better.

var images = [];
function preload() {
    for (var i = 0; i < arguments.length; i++) {
        images[i] = new Image();
        images[i].src = preload.arguments[i];
    }
}

//-- usage --//
preload(
    "http://domain.tld/gallery/image-001.jpg",
    "http://domain.tld/gallery/image-002.jpg",
    "http://domain.tld/gallery/image-003.jpg"
)

Source: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

9
  • 3
    there's no onload handler for any of the images Jul 27, 2015 at 18:22
  • 24
    Could you explain why this is better?
    – JJJ
    Jan 29, 2016 at 15:09
  • 3
    @BeNice I think you're misunderstanding, loading images is async, therefore you have to handle the onload state or you're just instantiating images in memory. Mar 31, 2016 at 15:35
  • 3
    If you use this solution, don't forget the var statement for the i-variable. Otherwise it will be set globally which can cause error that are really hard to solve (unless you know that you forgot the var statement. for (var i = 0.....
    – Mohammer
    Jun 13, 2016 at 23:37
  • 2
    @Mohammer thanks for this, I just copied the code from the link I provided. I will edit the code now to add the var
    – clintgh
    Jun 14, 2016 at 2:55
49

You can move this code to index.html for preload images from any url

<link rel="preload" href="https://via.placeholder.com/160" as="image">
7
  • 1
    This answer did not get enough attention as being one of the least cumbersome methods in practice. Mar 31, 2021 at 2:56
  • 1
    Agreed. This was very effective in preloading images within a carousel too. Thanks for posting!
    – Omar
    Sep 28, 2021 at 22:30
  • Is there a way to do that in js like - mylinkwithpreload = document.createElement("link)...... myheader.appendChild(linkwithpreload)
    – Rooki
    Dec 17, 2021 at 11:50
  • 2
    Well the OP asked, how to preload images in JS . this is not JS . Jan 20, 2022 at 14:08
  • 1
    @KhomNazid Loading the image from this tag does not block rendering. You can see this by opening the network tab, setting a throttle, and viewing the waterfall diagram. The preloaded image starts, but the rest of the page is rendered while it is still downloading. Jun 10, 2022 at 15:58
41

In my case it was useful to add a callback to your function for onload event:

function preloadImage(url, callback)
{
    var img=new Image();
    img.src=url;
    img.onload = callback;
}

And then wrap it for case of an array of URLs to images to be preloaded with callback on all is done: https://jsfiddle.net/4r0Luoy7/

function preloadImages(urls, allImagesLoadedCallback){
    var loadedCounter = 0;
  var toBeLoadedNumber = urls.length;
  urls.forEach(function(url){
    preloadImage(url, function(){
        loadedCounter++;
            console.log('Number of loaded images: ' + loadedCounter);
      if(loadedCounter == toBeLoadedNumber){
        allImagesLoadedCallback();
      }
    });
  });
  function preloadImage(url, anImageLoadedCallback){
      var img = new Image();
      img.onload = anImageLoadedCallback;
      img.src = url;
  }
}

// Let's call it:
preloadImages([
    '//upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg',
  '//www.csee.umbc.edu/wp-content/uploads/2011/08/www.jpg'
], function(){
    console.log('All images were loaded');
});
0
34
const preloadImage = src => 
  new Promise((resolve, reject) => {
    const image = new Image()
    image.onload = resolve
    image.onerror = reject
    image.src = src
  })


// Preload an image
await preloadImage('https://picsum.photos/100/100')

// Preload a bunch of images in parallel 
await Promise.all(images.map(x => preloadImage(x.src)))
2
  • This worked perfectly in my case for a carousel of images that are quite large in size, +1 Dec 25, 2021 at 7:09
  • I did the same, but Google Page Insights still tells me I need to preload the image.
    – Michael
    Feb 24 at 12:23
22

CSS2 Alternative: http://www.thecssninja.com/css/even-better-image-preloading-with-css2

body:after {
  content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
  display: none; 
}

CSS3 Alternative: https://perishablepress.com/preload-images-css3/ (H/T Linh Dam)

.preload-images {
  display: none; 
  width: 0;
  height: 0;
  background: url(img01.jpg),
              url(img02.jpg),
              url(img03.jpg);
}

NOTE: Images in a container with display:none might not preload. Perhaps visibility:hidden will work better but I have not tested this. Thanks Marco Del Valle for pointing this out

8
  • Thanks mplungjan. Although it doesn't help me with this particular case, it is good to know.
    – Francisc
    Sep 6, 2010 at 9:36
  • 5
    Am I right saying this will slow down loading of the page because these images need to be downloaded before the page can launch the load event?
    – jakubiszon
    Mar 7, 2015 at 17:23
  • 3
    I do not believe these will work on all browsers. I know that on Chrome images are not loaded until they are visible. Will need to remove the display: none; and instead try and position them so they cannot be seen. Can then hide with JS after everything has loaded if needed.
    – Bullyen
    Dec 29, 2015 at 16:02
  • 3
    Background images in an element with display: none will not preload.
    – Marquizzo
    Mar 17, 2016 at 21:44
  • 1
    This method worked for me only I (1) did not use display: none, (2) did not use the width/height: 0, (3) put no-repeat and a position such that the image would be outside (-<width>px -<height>px will get you there, so if your images are all 100px in height or less, you can use 0 -100px, in other words url(...) no-repeat 0 -100px. Aug 10, 2016 at 0:37
13

I recommend you use a try/catch to prevent some possible issues:

OOP:

    var preloadImage = function (url) {
        try {
            var _img = new Image();
            _img.src = url;
        } catch (e) { }
    }

Standard:

    function preloadImage (url) {
        try {
            var _img = new Image();
            _img.src = url;
        } catch (e) { }
    }

Also, while I love DOM, old stupid browsers may have problems with you using DOM, so avoid it altogether IMHO contrary to freedev's contribution. Image() has better support in old trash browsers.

4
  • 7
    I do not think this is how you catch errors when loading Image in javascript - there is something like _img.onerror that can(should?) be used.
    – Greg0ry
    Sep 23, 2015 at 8:57
  • 3
    What are "possible issues"?
    – Kissaki
    Apr 25, 2017 at 16:37
  • Issues such as support for the command. Check out the site "can i use" to see if a browser you are required to support has support for a javascript command.
    – Dave
    Jan 26, 2018 at 14:44
  • @Dave I know it's old, but add this info to your answer ^^ Oct 14, 2020 at 20:08
12

Working solution as of 2020

Most answers on this post no longer work - (atleast on Firefox)

Here's my solution:

var cache = document.createElement("CACHE");
cache.style = "position:absolute;z-index:-1000;opacity:0;";
document.body.appendChild(cache);
function preloadImage(url) {
    var img = new Image();
    img.src = url;
    img.style = "position:absolute";
    cache.appendChild(img);
}

Usage:

preloadImage("example.com/yourimage.png");

Obviously <cache> is not a "defined" element, so you could use a <div> if you wanted to.

Use this in your CSS, instead of applying the style attribute:

cache {
    position: absolute;
    z-index: -1000;
    opacity: 0;
}

cache image {
    position: absolute;
}

If you have tested this, please leave a comment.

Notes:

  • Do NOT apply display: none; to cache - this will not load the image.
  • Don't resize the image element, as this will also affect the quality of the loaded image when you come to use it.
  • Setting position: absolute to the image is necessary, as the image elements will eventually make it's way outside of the viewport - causing them to not load, and affect performance.

UPDATE

While above solution works, here's a small update I made to structure it nicely:

(This also now accepts multiple images in one function)

var cache = document.createElement("CACHE");
document.body.appendChild(cache);
function preloadImage() {
    for (var i=0; i<arguments.length; i++) {
        var img = new Image();
        img.src = arguments[i];
        var parent = arguments[i].split("/")[1]; // Set to index of folder name
        if ($(`cache #${parent}`).length == 0) {
            var ele = document.createElement("DIV");
            ele.id = parent;
            cache.appendChild(ele);
        }
        $(`cache #${parent}`)[0].appendChild(img);
        console.log(parent);
    }
}

preloadImage(
    "assets/office/58.png",
    "assets/leftbutton/124.png",
    "assets/leftbutton/125.png",
    "assets/leftbutton/130.png",
    "assets/leftbutton/122.png",
    "assets/leftbutton/124.png"
);

Preview:

enter image description here

Notes:

  • Try not to keep too many images preloaded at the same time (this can cause major performance issues) - I got around this by hiding images, which I knew wasn't going to be visible during certain events. Then, of course, show them again when I needed it.
1
  • Your simpler version solved my problem, thanks. I did have to move the appendChild call into the function body in order to make it work in the page head area, as it complained about document.body being null otherwise.
    – Stovey
    Apr 18, 2022 at 19:59
11

This approach is a little more elaborate. Here you store all preloaded images in a container, may be a div. And after you could show the images or move it within the DOM to the correct position.

function preloadImg(containerId, imgUrl, imageId) {
    var i = document.createElement('img'); // or new Image()
    i.id = imageId;
    i.onload = function() {
         var container = document.getElementById(containerId);
         container.appendChild(this);
    };
    i.src = imgUrl;
}

Try it here, I have also added few comments

0
9

Solution for ECMAScript 2017 compliant browsers

Note: this will also work if you are using a transpiler like Babel.

'use strict';

function imageLoaded(src, alt = '') {
    return new Promise(function(resolve) {
        const image = document.createElement('img');

        image.setAttribute('alt', alt);
        image.setAttribute('src', src);

        image.addEventListener('load', function() {
            resolve(image);
        });
    });
}

async function runExample() {
    console.log("Fetching my cat's image...");

    const myCat = await imageLoaded('https://placekitten.com/500');

    console.log("My cat's image is ready! Now is the time to load my dog's image...");

    const myDog = await imageLoaded('https://placedog.net/500');

    console.log('Whoa! This is now the time to enable my galery.');

    document.body.appendChild(myCat);
    document.body.appendChild(myDog);
}

runExample();

You could also have waited for all images to load.

async function runExample() {
    const [myCat, myDog] = [
        await imageLoaded('https://placekitten.com/500'),
        await imageLoaded('https://placedog.net/500')
    ];

    document.body.appendChild(myCat);
    document.body.appendChild(myDog);
}

Or use Promise.all to load them in parallel.

async function runExample() {
    const [myCat, myDog] = await Promise.all([
        imageLoaded('https://placekitten.com/500'),
        imageLoaded('https://placedog.net/500')
    ]);

    document.body.appendChild(myCat);
    document.body.appendChild(myDog);
}

More about Promises.

More about "Async" functions.

More about the destructuring assignment.

More about ECMAScript 2015.

More about ECMAScript 2017.

1
  • Excellent solution Aug 26, 2021 at 6:32
8

The HTML Living Standard now supports 'preload'

According to the W3C HTML spec you can now preload using JavaScript like so:

var link = document.createElement("link");
link.rel = "preload";
link.as = "image";
link.href = "https://example.com/image.png";
document.head.appendChild(link);
2
  • 2
    I get a Resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate 'as' value and it is preloaded intentionally. error when using this method :( Also the preload just doesn't work
    – xperator
    Apr 17, 2022 at 9:46
  • 1
    @mikemaccana fixed
    – TwistedOwl
    Aug 24, 2022 at 9:25
5

Here is my approach:

var preloadImages = function (srcs, imgs, callback) {
    var img;
    var remaining = srcs.length;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image;
        img.onload = function () {
            --remaining;
            if (remaining <= 0) {
                callback();
            }
        };
        img.src = srcs[i];
        imgs.push(img);
    }
};
3

Yes this will work, however browsers will limit(between 4-8) the actual calls and thus not cache/preload all desired images.

A better way to do this is to call onload before using the image like so:

function (imageUrls, index) {  
    var img = new Image();

    img.onload = function () {
        console.log('isCached: ' + isCached(imageUrls[index]));
        *DoSomething..*

    img.src = imageUrls[index]
}

function isCached(imgUrl) {
    var img = new Image();
    img.src = imgUrl;
    return img.complete || (img .width + img .height) > 0;
}
3
  • 1
    Can you please link some reference about this browsers limit?
    – nulll
    Jul 10, 2016 at 8:26
  • It is hard to find a reference (at least I never found one), but I used my own project to test this while looking closely at what was loaded from cache and server calls using Chrome's network tab in the Chrome developer tools (f12). I found the same behavior in Firefox and using mobile.
    – Robin
    Dec 6, 2016 at 4:22
  • 2
    -1 because I carefully tested the claim in the first sentence here and found it to be false, at least in modern browsers. See stackoverflow.com/a/56012084/1709587. Yes, there's a limit on the max number of parallel HTTP requests the browser is willing to send, but it does eventually get round to requesting every URL you call preloadImage on, even if you do it the way shown in the question.
    – Mark Amery
    May 8, 2019 at 10:57
3

I can confirm that the approach in the question is sufficient to trigger the images to be downloaded and cached (unless you have forbidden the browser from doing so via your response headers) in, at least:

  • Chrome 74
  • Safari 12
  • Firefox 66
  • Edge 17

To test this, I made a small webapp with several endpoints that each sleep for 10 seconds before serving a picture of a kitten. Then I added two webpages, one of which contained a <script> tag in which each of the kittens is preloaded using the preloadImage function from the question, and the other of which includes all the kittens on the page using <img> tags.

In all the browsers above, I found that if I visited the preloader page first, waited a while, and then went to the page with the <img> tags, my kittens rendered instantly. This demonstrates that the preloader successfully loaded the kittens into the cache in all browsers tested.

You can see or try out the application I used to test this at https://github.com/ExplodingCabbage/preloadImage-test.

Note in particular that this technique works in the browsers above even if the number of images being looped over exceeds the number of parallel requests that the browser is willing to make at a time, contrary to what Robin's answer suggests. The rate at which your images preload will of course be limited by how many parallel requests the browser is willing to send, but it will eventually request each image URL you call preloadImage() on.

1
  • Does it matter whether the images are cached in memory or disk? it seems the OP method is cached on disk as opposed to @clintgh method which gets cached in memory.
    – MilkyTech
    May 21, 2020 at 17:47
3

The browser will work best using the link tag in the head.

export function preloadImages (imageSources: string[]): void {
  imageSources
    .forEach(i => {
      const linkEl = document.createElement('link');
      linkEl.setAttribute('rel', 'preload');
      linkEl.setAttribute('href', i);
      linkEl.setAttribute('as', 'image');
      document.head.appendChild(linkEl);
    });
}
2

This is what I did, using promises:


const listOfimages = [
    {
        title: "something",
        img: "https://www.somewhere.com/assets/images/someimage.jpeg"
    },  
    {
        title: "something else",
        img: "https://www.somewhere.com/assets/images/someotherimage.jpeg"
    }
];

const preload = async () => {
    await Promise.all(
        listOfimages.map(
            (a) =>
                new Promise((res) => {
                    const preloadImage = new Image();
                    preloadImage.onload = res;
                    preloadImage.src = a.img;
                })
        )
    );
}

0

This is the original answer but a with a more modern ES syntax:

let preloadedImages = [];
export function preloadImages(urls) {
    preloadedImages = urls.map(url => {
        let img = new Image();
        img.src = url;
        img.onload = () => console.log(`image url [${url}] has been loaded successfully`);
        
        return img;
    });
}
0

For anyone interested, here's some alternatives to code provided by OP.

preloadImage()

Function now returns

function preloadImage = function(url){
   const img = new Image();
   img.src = url;
   return img
}

v1: Preload by passing images as arguments to preloadImages()

Returns array of Image typed objects returned by function. Useful to check status of preload.

jsFiddle

function preloadImage(url){
  const img = new Image();
  img.src = url;
  return img
}

function preloadImages() {
  const images = []
  for (var i = 0; i < arguments.length; i++) {
    images[i] = preloadImage(arguments[i])
  }
  return images
}

  //-- usage --//
const images = preloadImages(
  "http://domain.tld/gallery/image-001.jpg",
  "http://domain.tld/gallery/image-002.jpg",
  "http://domain.tld/gallery/image-003.jpg"
)

v2: Preload by passing images as an array to preloadImages()

Not type safe Overwrites provided array with an Image type object. Returns array of Image typed objects returned by function. Useful to check status of preload.

jsFiddle

function preloadImage(url){
  const img = new Image();
  img.src = url;
  return img
}

function preloadImages(images) {
  for (var i = 0; i < images.length; i++) {
    images[i] = preloadImage(images[i])
  }
  return images
}

//-- usage --//
let arr = [
  "http://domain.tld/gallery/image-001.jpg",
  "http://domain.tld/gallery/image-002.jpg",
  "http://domain.tld/gallery/image-003.jpg"
]

const images = preloadImages(arr)
console.dir(images)

v3: Preload by passing either array(s) and/or argument(s to preloadImages()

Type safe. Returns array of Image typed objects returned by function. Useful to check status of preload.

jsFiddle

function preloadImage(url){
  const img = new Image();
  img.src = url;
  return img
}

function preloadImages() {
  const images = []
  let c = 0
  for (var i = 0; i < arguments.length; i++) {
    if (Array.isArray(arguments[i])) {
      for(var arr = 0; arr < arguments[i].length; arr++) {
        if(typeof arguments[i][arr] == 'string') {
            images[c] = preloadImage(arguments[i][arr])
            c++
        }
      }
    }
    else if(typeof arguments[i] == 'string') {
      images[c] = preloadImage(arguments[i])
      c++
    }
  }
  return images
}

  //-- usage --//
var arr = [
  "http://domain.tld/gallery/image-001.jpg",
  "http://domain.tld/gallery/image-002.jpg"
]

const images = preloadImages(
  arr,
  "http://domain.tld/gallery/image-003.jpg",
  "http://domain.tld/gallery/image-004.jpg",
  [
      "http://domain.tld/gallery/image-005.jpg", 
      "http://domain.tld/gallery/image-006.jpg"
  ]
)

console.dir(images)

Inspiration derived from: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.