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 函数，并且由于 updateImage 正文中没有 return 语句，因此返回值为未定义。因此，最后，window.onload 的值为undefined。

解决方案是将这部分代码更改为：

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

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

Answer 2

您可以使用触发器来检查元素是否已加载。

<script>

    function updateImage(url){     
        document.getElementById("foo").src = url;
    }

    function initOnLoad(sElementName) {
        var oElement = (sElementName == "body") ? document[sElementName] : document.getElementById(sElementName); 
        if(oElement != null && typeof(oElement) != "undefined") { 
            updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
        } 
        else { 
            setTimeout(function() { 
                initOnLoad(sElementName); 
            }, 0); 
        } 
    }

    initOnLoad('body');
</script>

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

Answer 3

您的代码中有错误。

window.onload = updateImage("...");

您没有为窗口加载分配函数处理程序。您正在分配 updateImage 函数的 RESULT。它在图像加载甚至添加到 DOM 之前立即执行。要分配函数处理程序，您需要：

window.onload = updateImage;

或

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

或 使用 jQuery

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