使用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:与他们同行的地点之一
他们可能有问题。
您如何请求并加载图像作为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图像时,图像应该从浏览器的缓存/内存为已加载的页面上回升。
我已经这样做了,上面没有直接提到,因为它和其他方法完全相同。尽管他们看起来,已经加载到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";
你的缓存设置Web服务器是否正确? – adeneo 2013-04-07 00:11:47
我希望浏览器缓存?图像来自未公开的CDN,它告诉浏览器缓存它们而不过期。 – 2013-04-07 00:13:45
我relalize这一点,但Web服务器发送包含有关文件多长时间应缓存信息的每个图像的标题,这是浏览器读取明白这一点。 – adeneo 2013-04-07 00:21:20