Javascript 带预加载的背景图像旋转

我需要10个背景图像（覆盖）在一个网站的背景旋转

每个大约有20万个，所以我们不希望看到它们加载

如何使用Javascript（或JQuery）强制所有或部分图像预加载，如果带宽较低，可能不进行旋转

---

谢谢。

首先，您需要使用JavaScript加载所有图像。背景加载完成时应用图像

function preloader() {
    if (document.getElementsByTagName) {
        document.getElementsByTagName("body").style.background = "url(http://domain.tld/image01.png) no-repeat -9999px -9999px";
        document.getElementsByTagName("body").style.background = "url(http://domain.tld/image02.png) no-repeat -9999px -9999px";
        document.getElementsByTagName("body").style.background = "url(http://domain.tld/image03.png) no-repeat -9999px -9999px";
    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(preloader);

//Now loop these images

var currentBackground = 0;
var backgrounds = [];
backgrounds[0] = 'http://domain.tld/image01.png';
backgrounds[1] = 'http://domain.tld/image02.png';
backgrounds[2] = 'http://domain.tld/image03.png';

function changeBackground() {
    currentBackground++;
    if(currentBackground > 2) currentBackground = 0;

    $('body').fadeOut(100,function() {
        $('body').css({
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
        });
        $('body').fadeIn(100);
    });


    setTimeout(changeBackground, 2000);
}

$(document).ready(function() {
    setTimeout(changeBackground, 2000);        
});

---

使用预加载您的图像。谢谢。实际上，在5秒后或加载下一幅图像时，以较长的时间为准，反射旋转。图像加载程序看起来很有趣-如果预加载所有10幅图像需要20秒，用户是否等待20秒才能看到任何东西？用户等待20秒才能看到背景图像，其余的（如果适用）将正常加载。

$（文档）。ready（函数（）{

和函数

addLoadEvent

？和

文档之间有什么区别。getElementsByTagName

返回一个节点列表。谢谢-忘了提及，图像之间也需要淡入黑色