我的onload监听器似乎无法正常工作

Question

I know I am missing something here, but my page isn't working right... 我知道我在这里遗漏了一些东西，但是我的页面无法正常工作...

I have a simple init() function tied to window.onload . 我有一个简单的init()函数绑定到window.onload 。 init() is firing but I get a weird error such as that it cannot read the DOM element itself. init()正在触发，但是我收到一个奇怪的错误，例如它无法读取DOM元素本身。 I can just pop into Firebug and run init(); 我可以直接进入Firebug并运行init(); from the console and that does work properly. 从控制台，这确实可以正常工作。 It appears I am not using the proper onload listener. 看来我没有使用正确的onload监听器。 Is there a better one? 有更好的吗？ Also, perhaps this is due to my use of document.getElementsByClassName() . 另外，也许这是由于我对document.getElementsByClassName() 。

Here is the error (and then me putting init() into the console): 这是错误（然后将init()放入控制台）： Firebug显示错误消息以及手动调用<code> init（）</ code>

Here is my relevant code: 这是我的相关代码：

... // There is more code, I just didnt include it.

  window.addEventListener("onload", init(), false);

  function init(){
    populateText();
    populateLinks();
    populateIcons();
  }

  function populateText(){
    var texts = document.getElementsByClassName("text");
    for (i = 0; i < data.links.length; i++) {
      texts[i].innerHTML = data.links[i].text;
    }
  }

  function populateLinks(){
    var links = document.getElementsByClassName("link");
    for (i = 0; i < data.links.length; i++) {
      links[i].href = data.links[i].link;
    }
  }

  function populateIcons(){
    var icons = document.getElementsByClassName("icon");
    for (i = data.links.length; i > 0; i--) {
      icons[(data.links.length-i)].src = "screens/screen ("+i+").png";
    }
  }
  </script>
</head>
<body>
  <div id='iconLinks'>
    <ul>
      <li>
        <a class="link" href="" target="_blank">
          <div class="text"></div>
          <img class="icon" src=""/>
        </a>
      </li>
      <li>
      <a class="link" href="" target="_blank">
        <div class="text"></div>
        <img class="icon" src=""/>
      </a>
    </li>
    <li>
      <a class="link" href="" target="_blank">
        <div class="text"></div>
        <img class="icon" src=""/>
      </a>
    </li>
    <li>
      <a class="link" href="" target="_blank">
        <div class="text"></div>
        <img class="icon" src=""/>
      </a>
    </li>
    <li>
      <a class="link" href="" target="_blank">
        <div class="text"></div>
        <img class="icon" src=""/>
      </a>
    </li>

... // There is more code, I just didnt include it.

Answer 1

You need to pass function reference to addEventListener() . 您需要将函数引用传递给addEventListener() 。 Also the event name is load , not onload . 同样，事件名称是load ，而不是onload 。 So the call should look like this: 因此，调用应如下所示：

window.addEventListener("load", init, false);

(You could also omit the false as third parameter, as that is the default value.) （您也可以省略false作为第三个参数，因为这是默认值。）

In your case init() is called first and it's return value (which is undefined ) is then passed to the handler for the onload event. 在您的情况下，首先调用init()然后将其返回值（ undefined ）传递给onload事件的处理程序。

Answer 2

If you wanna load your function until your entire DOM load finished : 如果您想加载函数直到整个DOM加载完成：

JS： JS：

<script>
window.onload = function(){
  populateText();
  populateLinks();
  populateIcons();
}
</script>

JQuery： JQuery的：

$(window).on("load", function() {
  populateText();
  populateLinks();
  populateIcons();
})

我的onload监听器似乎无法正常工作

问题描述

2 个解决方案

解决方案1
3 已采纳 2015-04-17 00:47:16

解决方案2
2 2015-04-17 00:56:42

我的onload监听器似乎无法正常工作

问题描述

2 个解决方案

解决方案1 3 已采纳 2015-04-17 00:47:16

解决方案2 2 2015-04-17 00:56:42

解决方案1
3 已采纳 2015-04-17 00:47:16

解决方案2
2 2015-04-17 00:56:42