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

Question

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

这是指向工作EXAMPLE和JSFIDDLE

的链接

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);

Answer 1

如何采用不同的方法 - 快速编辑，毫无疑问需要进行一些调整，例如摆脱显示：完全没有，而是使用不透明度等等：

jsFiddle

CSS：

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

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

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

HTML：

<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>

JS：

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);