Question

我已经检查了Dean Edward's onload post并提出了一个问题：此onload附加方法有什么问题？哪里以及为什么会失败？什么时候使用这个更简单的功能是安全的？

function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

Answer 1

Dean的帖子不是关于如何挂钩window.load事件，而是如何将有用的事件之前挂钩到{{1 }}。 window.load在页面加载周期中非常非常晚（在所有资源（包括所有图像）完全加载后）。如果您的网页有任何重要资源，并且等到window.load挂钩您的事件处理程序，那么您的用户可能会在处理程序连接之前开始执行操作。

请注意，Dean的文章写于2006年。现代的做法是简单地将您的脚本放在结束window.load标记之前。只要您的脚本在之后引用的任何元素，您就可以访问这些元素。这样，你就可以很早就搞定了。

示例（live copy）：

HTML：

</body>

JavaScript（就在<p>This page has a big image on it, to help demonstrate <code>window.load</code>'s very late arrival. Note that this paragraph started out black, but was turned green <em>immediately</em> on page load. This demonstrates that the paragraph was available to the code at the end of the page. </p> <img src="http://apod.nasa.gov/apod/image/1110/sh2136s_block900.jpg" style="position: absolute; top: 20em;">结束标记之前）：

</body>

如果你不能这样做（把脚本放在(function() { var first; function hookLoad(handler) { if (window.addEventListener) { window.addEventListener("load", handler, false); } else if (window.attachEvent) { window.attachEvent("onload", handler); } } display("Script running at end of page; turning paragraph green."); document.getElementsByTagName('p')[0].style.color = "green"; hookLoad(function() { display("First load handler"); }); hookLoad(function() { display("Second load handler"); }); function display(msg) { var p = document.createElement('p'), now = new Date().getTime(); msg = now + ": " + msg; if (first) { msg += " (delayed by " + (now - first) + "ms)"; } else { first = now; } p.innerHTML = msg; document.body.appendChild(p); } })();元素的末尾）由于某种原因，那么像Dean开始有用的技巧，但我强烈建议反对 DIY“DOM装”处理;相反，请使用良好，维护良好的库，例如jQuery，Prototype，YUI或any of several others，并使用他们的“就绪”事件。通过利用这些库中正在进行的工作，您可以专注于您尝试使用自己的页面/应用程序执行的操作。

参考文献：

YUI's best practices for speeding up your website
Google on when DOM elements are accessible（以及为什么他们的图书馆没有“DOM ready”事件）

[Re body具体来说：你不必诉诸于你的技巧，只需使用window.load（如果浏览器支持它，除旧的IE版本以外都做）或addEventListener （较旧的IE）。请参阅上面示例中的attachEvent。这些允许多个处理程序用于事件。]

JS：附加body onload跨浏览器（方法比较）

1 个答案: