Question

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

JS点击HTML页面上的锚点，循环显示4个图像。在Chrome / Safari中，它是一种享受。但是，在Firefox（build 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++;
}

提前致谢！

Answer 1

如上述评论中所述，预加载是您的解决方案。幸运的是我以前不得不做一些预加载，而且我有一个方便的脚本。我已经将它实现为与bfavaretto

上面的小提琴相同的结构

http://jsfiddle.net/wQq5M/

像这样创建一个LoadingGroup：

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

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

干杯。

在Firefox中移动鼠标之前，背景图像不会改变onclick

1 个答案: