我的onload監聽器似乎無法正常工作

Question

我知道我在這里遺漏了一些東西，但是我的頁面無法正常工作...

我有一個簡單的init()函數綁定到window.onload 。 init()正在觸發，但是我收到一個奇怪的錯誤，例如它無法讀取DOM元素本身。 我可以直接進入Firebug並運行init(); 從控制台，這確實可以正常工作。 看來我沒有使用正確的onload監聽器。 有更好的嗎？ 另外，也許這是由於我對document.getElementsByClassName() 。

這是錯誤（然后將init()放入控制台）： Firebug顯示錯誤消息以及手動調用<code> init（）</ 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

您需要將函數引用傳遞給addEventListener() 。 同樣，事件名稱是load ，而不是onload 。 因此，調用應如下所示：

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

（您也可以省略false作為第三個參數，因為這是默認值。）

在您的情況下，首先調用init()然后將其返回值（ undefined ）傳遞給onload事件的處理程序。

Answer 2

如果您想加載函數直到整個DOM加載完成：

JS：

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

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