Question

我需要在当前显示的图像（全屏幻灯片）之后动态预加载和缓存下一个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：

他们可能与其中一个同行地点有问题。

Answer 1

你如何请求和加载图像作为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中的图像时，图像应该从浏览器缓存/内存中获取，因为它已经加载到页面上。

Answer 2

使用不同的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";

使用jQuery预加载和缓存下一个x图像

2 个答案: