Question

我在这里有点困惑。我认为window.onload中指定的函数在页面加载之前没有执行。尽管如此，我在下面的代码中遇到错误（继承人jsfiddle version）：

<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");
}

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

Answer 2

您的代码中有错误。

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

您没有为窗口onload分配函数处理程序。您正在分配 updateImage 功能的结果。在图像加载或甚至添加到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"); 
});

Answer 3

您可以使用将检查元素已加载的触发器。

<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" />

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

3 个答案: