点击按钮无法在Firefox中更改背景图片，直到鼠标移动

Question

我正在尝试使用纯JavaScript，在用户单击页面上的链接时动态更改站点的背景。JS在单击HTML页面上的锚点时循环4个图像。在Chrome / Safari中，它运行良好。然而，在Firefox（版本23.0.1）中，背景会变空白，直到用户移动鼠标为止。因此，单击事件已触发，但下一个背景图像直到单击后鼠标移动才显示出来。有人知道是什么原因吗？如果可能的话，我想避免使用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++;
}

感谢提前！

- josephjbliss

---

在FF 23.0.1中重现 http://jsfiddle.net/YD7db/ - bfavaretto

感谢提供 jsfiddles。是的，那正是我遇到的问题。也许我只需要预加载图片？有没有关于使用纯 Javascript 进行预加载的最佳方法的想法？ - josephjbliss

奇怪的是，似乎在图像被缓存或者Firebug监控网络下载后才能正常工作。 - showdev

现在我无法再复制了（即使清除缓存）。我认为这只是一个延迟问题，图像只有在完全加载后才会显示。是的，请尝试预加载它们。 - bfavaretto

我强烈建议您在代码中使用jQuery，从HTML中删除onclick，并在js中处理事件。jQuery将为您处理跨浏览器问题。将代码从普通js移动到jQuery非常容易。如有需要，请寻求帮助。 - Guillermo

Answer 1

如上面的评论所述，预加载是您的解决方案。幸运的是，我以前做过一些预加载，并且有一个脚本方便使用。我已经将其实现到与bfavaretto上面的fiddle相同的结构中。

http://jsfiddle.net/wQq5M/

创建一个像这样的LoadingGroup：

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

当所有图片都完成时，回调函数将触发并显示第一张图片。希望这能帮到你。

祝好。

- Motionharvest