javascript - 如何仅在文档完成加载后加载 jQuery 函数

Question

奇怪的情况:

我正在使用 jQuery 和 CSS 构建菜单栏。
在我的 JavaScript 文件中，我有一个 on-ready 函数，如下所示:

$(document).ready(function(e) {
    mark_active_menu();
}

和...

function mark_active_menu() {
    var elementWidth = $("nav li").width();
    alert(elementWidth);
}

出于某种原因，甚至在所有 文档完成加载之前，我收到的警告消息宽度不正确。只有当我释放消息时，文档的其余部分才会加载，并且我会获得应有的正确宽度。

为什么在所有文档加载完成之前调用我的函数？有没有办法只在某个元素完成加载后加载函数(例如:nav 元素)？

Answer 1

您可以使用 window.load , 在所有资源加载完成后触发。

$(window).load(function(e) {
    mark_active_menu();
});

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading, Reference