Is there a way to load images to user's cache asynchronously?

Question

I have a list of items. Each of them is a square with a name, and when user hover on the square, an image will show, which is done by jQuery. Code is like this:

$('.square').hover(function() {
  var link = $(this).attr('title');
  $(this).addClass('squarehover')
         .css({backgroundImage: 'url(images/' + escape(link) + '.jpg)'}); 
}, function() {
  $(this).removeClass('squarehover')
         .attr('style', '');   
});

.squarehover {
  font-size: 0px;
  background-repeat: no-repeat;
  background-size: 100%;
  -moz-background-size: 100%;
  background-position: center center;
  position: absolute;
  z-index: 10;
  cursor: pointer;
}

If the images are not loaded beforehand, there will be a small delay when hovering. Also, I don't want to show the page after finishing loading all the images.

Because images are not explicitly shown in the page, is it possible to first load the page then start to load images to user's cache (my idea is that user will not immediately move the mouse onto those square)? How to do that if there is no <img> tag in HTML?

BTW, since background-size is not supported in IE8, how to deal with that?

score 5 · Accepted Answer · edited May 23 '17 at 10:27

5

You can preload images like this:

function preloadImages(srcs) {
    if (!preloadImages.cache) {
        preloadImages.cache = [];
    }
    var img;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image();
        img.src = srcs[i];
        preloadImages.cache.push(img);
    }
}

// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];

preloadImages(imageSrcs);

Just fill in the URLs in the imageSrcs array and run this when your page first runs. The sooner you run it, the earlier your images will be available.

FYI, a related answer here: Image preloader javascript that supports events.

edited May 23 '17 at 10:27

Community

1
1

answered Dec 09 '11 at 18:45

jfriend00

683,504
96
985
979

Shouldn't be `img.src = srcs[i]`? – DrXCheng Dec 09 '11 at 18:50
If you dont put the images into the page they will be discarted of the browser cache later (at least in chrome), so you should put them in the HTML, maybe with display:none – melanke Oct 30 '13 at 22:19
@melanke - the images do not need to be in the page. Once they are loaded here, they will be cached in the browser cache, the same as any image in the DOM. Once in the cache, they will load very quickly (no networking required to fetch the image data). They won't stay in the cache forever, but in most configurations they will at least be in the cache for several days worth of browsing. – jfriend00 Oct 31 '13 at 00:33
I have this issue: if I am in a mobile device, using chrome, load the image only in JS and dont put them in the html, wait for a while and then place they in HTML, they will have to load again – melanke Oct 31 '13 at 14:12
@melanke - are you saving the JS image objects like the code above does? Those objects are as live as if they were in the DOM so there should be no difference. If you're letting the garbage collector dispose of the JS-created `img` objects, then a memory starved browser might treat them differently, but I wouldn't think so while the images are still live. – jfriend00 Oct 31 '13 at 21:10
Well, I dont have the code anymore, maybe I was doing something wrong, maybe I was just loading and using the URL again, sorry for bothering you – melanke Nov 05 '13 at 16:30

Is there a way to load images to user's cache asynchronously?

1 Answers1

Linked