Question

我创建了改变背景图片的网站 HTML：

<div id="templatemo_header">
</div>

CSS：

#templatemo_header {
    background: url(images/templatemo_header.jpg) no-repeat;
}

和JS代码每3秒更改一次BG图像

function displayImage(image) {
    document.getElementById("templatemo_header").style.backgroundImage = image;
}

function displayNextImage() {
    x = (x == images.length - 1) ? 0 : x + 1;
    displayImage(images[x]);           
}

function displayPreviousImage() {
    x = (x <= 0) ? images.length - 1 : x - 1;
    displayImage(images[x]);           
}

function startTimer() {
    setInterval(displayNextImage, 3000);
}

var images = [], x = -1;
images[0] = 'url("images/templatemo_header1.jpg")';
images[1] = 'url("images/templatemo_header2.jpg")';
images[2] = 'url("images/templatemo_header3.jpg")';
images[3] = 'url("images/templatemo_header.jpg")';

问题是当每张BG图像第一次改变时，图像消失，并在一段时间后出现新图像我想，这是因为下载了新的BG图像是否有一种强制立即下载图像的方法，比如在函数startTimer中？提前致谢。

Answer 1

使用javascript here预加载图片有几种方法。通过预加载图像，您可以在显示图像时获得更好的运气。在你的情况下，我会尽可能使用方法3，如果不是，方法2.如文章所述，你将使用window.onload事件在页面加载后开始下载图像。

我只是设置你的图像数组如下：

window.onload = preLoadImages();

function preLoadImages(){
    preLoadImage = new Image();

    images[0] = "images/templatemo_header1.jpg";
    images[1] = "images/templatemo_header2.jpg";
    images[2] = "images/templatemo_header3.jpg";
    images[3] = "images/templatemo_header.jpg";

    for(i=0, i<=images.length, i++){
        preLoadImage.src=images[i];
    }
}

立即下载更改背景图像

1 个答案: