我用不断变化的背景图片创建了网站。
HTML:
<div id="templatemo_header">
</div>
CSS:
#templatemo_header {
background: url(images/templatemo_header.jpg) no-repeat;
}
以及每3秒更换一次BG图片的JS代码
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 中?
提前致谢。
最佳答案
有几种方法可以使用 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];
}
}
关于javascript - 立即下载不断变化的背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21125544/