window.onload中调用的函数无法识别元素

Question

我在这里有点困惑.我认为指定的函数在window.onload页面加载之前没有执行.尽管如此,我在下面的代码中得到一个错误(继承人的jsfiddle版本):

<script>
    function updateImage(url){     
        document.getElementById("foo").src = url;
    }    
    window.onload = updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
</script>

<img id="foo" alt="" src="http://dummyimage.com/100x100/000/fff.png&text=bar" />

它给了我:

Error: document.getElementById("foo") is null

将图像移到脚本上方时,一切正常.

Answer 1

window.onload期望是一个函数 - 它将在页面加载时调用.但是你分配给它的不是一个功能.你分配了

updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");

它会立即执行该updateImage函数,并且由于您return在正文中没有语句updateImage,因此返回值为undefined.因此,最后,window.onload有价值undefined.

解决方案是将该位代码更改为:

window.onload = function(){
    updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
}

这将导致它在窗口加载时调用该函数并执行您期望的操作.