即使已经加载也会缓存相同的图像(背景幻灯片)

时间:2014-09-02 20:09:26

标签: javascript html css

我正在尝试使用图片预加载器创建简单的背景幻灯片。我将图像加载到一个新数组中,然后每隔n秒更改一次背景URL。即使加载了所有图像,它仍然会将相同的图像添加到浏览器缓存中,就像它们没有被加载一样。我想知道是否有办法避免它以及原因是什么?

似乎适用于Firefox但不适用于Safari或Chrome TEST

var images = new Array();
var imagePaths = [ 
"img/pic1.jpg",
"img/bic2.jpg",
"img/pic3.jpg",
"img/bic4.jpg"
];

var cnt = 0;

function imagesloaded(){
cnt++
if (cnt >= imagePaths.length){
    window.alert('all loaded!');
    changebg();
}
};

for(var i = 0; i < imagePaths.length; i++) {
var img = new Image();
img.src = imagePaths[i];
images[i] = img;

images[i].onload = function(){
    imagesloaded();
}
}

var i = -1;

function changebg(){
$('#container').css({background : 'url(' + images[i++].src + ')'});
    if (i == images.length) {
        i = 0;
    }
}
setInterval(changebg, 1000);

0 个答案:

没有答案