3

当用户单击我页面上的链接时，我正在尝试使用纯 Javascript 动态更改站点的背景。

JS 在单击 HTML 页面上的锚点时循环显示 4 个图像。在 Chrome/Safari 中，它是一种享受。但是，在 Firefox（构建 23.0.1）中，背景会变为空白，直到用户移动光标。因此，onclick 会触发，但直到鼠标在单击后移动时才会显示下一个背景图像。有谁知道这是什么原因？我想避免使用 jQuery，如果可能的话，或者至少要了解 jQuery 正在做什么来避免此类问题......

的HTML：

<a onclick="nextBackground()" id="startSwapping">Next Background</a>

Javascript：

var count = 0;
var backgrounds = new Array();
var background = "";

backgrounds[0] = "alaska.jpg";
backgrounds[1] = "delaware.jpg";
backgrounds[2] = "idaho.jpg";
backgrounds[3] = "massachusetts.jpg";   

function nextBackground() {
    if(count >= 4) {
        count = 0;
    }
    background = "url('images/"+backgrounds[count]+"')";
    document.body.style.backgroundImage = background;
    count++;
}

提前致谢！

4

1 回答 1

0

如上面的评论所述，预加载是您的解决方案。幸运的是，我之前不得不进行一些预加载，并且手边有一个脚本。我已经将它实现为与 bfavaretto 上面的小提琴相同的结构

http://jsfiddle.net/wQq5M/

创建一个LoadingGroup这样的：

var lg = new LoadingGroup(backgrounds, function(imgs){
console.log("all done...", imgs);
nextBackground();
});

当所有图像都完成后，回调触发并显示第一张图像。希望这可以帮助。

干杯。

于 2013-09-25T00:10:59.170 回答