且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

有没有办法异步加载图像到用户的缓存?

更新时间:2022-12-12 23:15:43

您可以像这样预加载图片:

 函数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);



//然后调用它,你可以使用这个
var imageSrcs = [src1,src2,src3, SRC4\" ];

preloadImages(imageSrcs);

只需填写 imageSrcs 数组并在您的页面第一次运行时运行。越早运行它,越早的图像将可用。



仅供参考,相关答案在这里:图片预载JavaScript支持事件


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?

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.