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?

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?

• javascript
• html
• image

1 Answer 1

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.