Javascript 在页面加载时设置div的背景

我有一个带有两个按钮的页面，可以将div中的图像从一个按钮切换到另一个按钮。我希望在加载页面时在div中显示图像，这是我的尝试：

脚本：

<script type="text/javascript">
function startPic(){
    document.getElementById('imageRoll').style.backgroundImage="url(balanceSheet.jpg)";
}
function changeStyle1(){
    document.getElementById("imageRoll").style.backgroundImage="url(balanceSheet.jpg)";
}
function changeStyle2(){
    document.getElementById("imageRoll").style.backgroundImage="url(incomeStatement.jpg)";
}
document.body.onload = startPic();
</script>

函数startPic（）{
document.getElementById（'imageRoll'）.style.backgroundImage=“url（balanceSheet.jpg）”；
}
函数changeStyle1（）{
document.getElementById（“imageRoll”）.style.backgroundImage=“url（balanceSheet.jpg）”；
}
函数changeStyle2（）{
document.getElementById（“imageRoll”）.style.backgroundImage=“url（incomeStatement.jpg）”；
}
document.body.onload=startPic（）；

HTML:

见资产负债表
见损益表

---

使用上述代码，交换将完全按照预期执行，如果在startPic函数中设置了警报，则警报在图像嵌入线之前有效，但在图像嵌入线之下无效。由于某些原因，startPic函数中的图像嵌入行不起作用。

在附加事件时请删除括号，否则将调用函数而不附加事件：

// good - attaches the function to the onload of the body
document.body.onload = startPic;
// bad - won't work as you would expect
document.body.onload = startPic();

您可以随时使用事件侦听器进行操作；比如：

var load = function(fn){
    var d = document;
    if(d.addEventListener) {
        d.addEventListener("DOMContentLoaded", fn, false);
    } else {
        d.attachEvent("onreadystatechange", function(){
            if(d.readyState === "complete") {
                fn();
            }
        });
    }
};
load(startPic);

---

这将在浏览器间运行得非常好。

附加：如果我像这样将图像添加到div中：图片会显示，但交换不起作用。无论是谁刚刚发表了评论，然后删除了他们的评论，你是对的。。。我把脚本移到HTML下面，它就工作了！非常感谢。是的，等待DOM加载会导致这种情况。检查我更新的答案，看看是否有一种不那么突兀的处理方式。

var load = function(fn){
    var d = document;
    if(d.addEventListener) {
        d.addEventListener("DOMContentLoaded", fn, false);
    } else {
        d.attachEvent("onreadystatechange", function(){
            if(d.readyState === "complete") {
                fn();
            }
        });
    }
};
load(startPic);