Javascript 避免每次加载图像时加载图像'；s调用（背景图像滑块阵列）

我想知道如何避免每次调用图像时都加载它

这里有一个链接，指向一个正在工作和

var图像=[
“img/img1.jpg”，
“img/img2.jpg”，
“img/img3.jpg”
],
l=图像长度
对于（var i=0；i另一种方法如何-快速编辑，无疑需要一些调整，例如完全取消显示：无，使用不透明度，等等：


CSS:

HTML:

创建一个图像元素并更改其源代码可以在较新的浏览器中解决此问题，至少在Chrome中是这样。它在FireFox上运行得非常好，而不是在Chrome上。你的小提琴和示例也不能在Chrome上正常工作。关于浏览器问题，你能做些什么？请注意，在任何开发环境/模式之外，你的浏览器都应该ld会自动处理缓存。例如，如果你观察chrome中的实际请求，它只需检查文件自上次下载以来是否被修改——服务器返回304“未修改”响应，浏览器从缓存加载。（提示：注意传输的字节数：~61KB、~84KB、~29KB用于前3个请求。244B用于所有后续请求）如果这真的困扰您，我会采取动态方式，为每个图像添加条目，然后更改
主体
标记的
类名
。
var images = [
    'img/img1.jpg',
    'img/img2.jpg',
    'img/img3.jpg'
    ],

l = images.length

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

i=0

function changeBG(){
    $('body').css({ backgroundImage: "url("+ images[i++]+ ")" });
        if (i == images.length) {
            i = 0;
        }
}
changeBG();

setInterval(changeBG, 2000);

body
{
    width:100%;
    height:100%;
}

.bgImage
{
    display:none;
    width:100%;
    height:100%;

    position:absolute;
    top:0;
    left:0;
}

<div id="background_image">
    <img id="bgImage_1" class="bgImage" src="https://dl.dropboxusercontent.com/u/59549499/example/img/img1.jpg">
    <img id="bgImage_2" class="bgImage" src="https://dl.dropboxusercontent.com/u/59549499/example/img/img2.jpg">
    <img id="bgImage_3" class="bgImage" src="https://dl.dropboxusercontent.com/u/59549499/example/img/img3.jpg">
</div>

curImage = 0;
nextImage = 1;

function changeBG()
{
    jQuery('#bgImage_' + nextImage).css('opacity', 0).show().animate({'opacity': 1}, 300);
    if(curImage > 0) jQuery('#bgImage_' + curImage).animate({'opacity': 0}, 300);

    curImage = nextImage;
    nextImage++;
    if(nextImage > 3) nextImage = 1;
}
changeBG();

setInterval(changeBG, 2000);