Question

我需要10个背景图片（覆盖）才能在网站的背景中旋转。

它们各自约为200k，因此我们不希望看到它们加载。

如何使用Javascript（或JQuery）强制所有或部分图像预加载，如果带宽较低，可能不会轮换？

感谢。

Answer 1

首先，您需要使用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);        
});

背景图像旋转与预加载

1 个答案: