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

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

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

我如何预加载和缓存T他的图像

方法＃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：与他们同行的地点之一

他们可能有问题。

来源

2013-04-07 André Catita

你的缓存设置Web服务器是否正确？ – adeneo 2013-04-07 00:11:47

我希望浏览器缓存？图像来自未公开的CDN，它告诉浏览器缓存它们而不过期。 – 2013-04-07 00:13:45

我relalize这一点，但Web服务器发送包含有关文件多长时间应缓存信息的每个图像的标题，这是浏览器读取明白这一点。 – adeneo 2013-04-07 00:21:20

您如何请求并加载图像作为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-08 11:29:18

我已经这样做了，上面没有直接提到，因为它和其他方法完全相同。尽管他们看起来，已经加载到DOM。第二个你改变图像的src，他请求但不是从缓存。 – 2013-04-08 13:07:06

你试过使用相同的图像对象而不是改变源？ – 2013-04-08 14:23:27

看看这个的jsfiddle：http://jsfiddle.net/devshangari/5fpge/4/ – 2013-04-08 14:34:48

如何使图像在不同的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-26 10:51:02

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

回答

相关问题