有没有办法异步加载图像到用户的缓存？ [英] Is there a way to load images to user's cache asynchronously?

问题描述

我有一个项目列表。它们中的每一个都是一个带有名称的正方形，当用户将鼠标悬停在正方形上时，将显示一个图像，由jQuery完成。代码如下：

$ $ $ $'code $（'。square'）。hover（function（）{
var link = $（this）.attr（'title'）;
$（this）.addClass（'squarehover'）
.css（{backgroundImage：'url（images /'+ escape（link）+' （''）'}）;
}，function（）{
$（this）.removeClass（'squarehover'）
.attr（'style'，''）;
}）;

.squarehover {
font-size：0px;
背景重复：不重复;
background-size：100％;
-moz-background-size：100％;
background-position：center center;
位置：绝对;
z-index：10;
光标：指针;





$ b

如果图像未事先加载，悬停时会有小的延迟。另外，我不想在完成加载所有图像后显示页面。

因为图像没有明确显示在页面中，是否有可能首先加载页面，然后开始加载图像到用户的缓存（我的想法是，用户不会立即将鼠标移动到这些方块）？如果HTML中没有< img> 标记，那么该怎么做？

顺便说一句，因为 background-size 在IE8中不被支持，该如何处理？

解决方案

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

 函数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.

这篇关于有没有办法异步加载图像到用户的缓存？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！