1

我需要在当前显示的图像（全屏幻灯片）之后动态预加载和缓存下一个 X 图像。
到目前为止，我已经尝试了所有找到的方法，但浏览器仍然没有缓存。

注意 #1：我不知道是否有关系，但在美好的一天，每张照片至少有 2 Mb。

我如何预加载和缓存图像

方法#1：

$('<img/>').attr({
    src: list[url]
}).load(function() {
    alert("I have preloaded your next image.");
});

方法#2：

next_img = new Image()
next_img.src=list[url];
next_img.onload=function(){ alert("I have preloaded your next image."); }

方法#3：

    $('<img/>')[0].src = list[url];

我在浏览器控制台中看到的是它们确实已加载，因为我也收到了警报通知。

但是在我有我的 jQuery 函数的地方，要更改全屏显示的图像的“src”，控制台会显示再次下载的图片，并且没有提到缓存，正如我也可以通过 3-4 秒的加载图片上面的方法刚刚加载。

编辑：

我在所有浏览器中都没有缓存。
所有图片均来自 MaxCDN。

编辑#2：

他们的对等位置之一可能存在问题。

4

2 回答 2

0

您如何请求并加载图像作为 div 元素的子元素，并从可见屏幕区域绝对定位该 div。

例如：

JavaScript:
var arrImages = {}; 
var image = new Image();
var image.onload = function() {
    $('.imageContainerDiv').append(this);
    arrImages[this.src] = this;
}
image.src = imageURL;

Css:
.imageContainerDiv {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    top: -1024px;
    left: -1024px;
}

这样，下次您从 arrImages 引用图像时，图像应该从浏览器缓存/内存中提取，因为它已经加载到页面上。

于 2013-04-08T11:29:18.777 回答
0

用不同的 z-index 将图像放在一起怎么样？

喜欢：

.image_top {position:absolute; left:0px; top:0px; z-index:100;}
.image {position:absolute; left:0px; top:0px; z-index:0;}

显示的图像：

images[0].className  = "image_top";
于 2013-11-26T10:51:02.283 回答