如何在文档加载完成后加载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();
});

load文件在文档加载过程结束时触发.此时,文档中的所有对象都在DOM中,并且所有图像和子帧都已完成加载,参考

Answer 2

目前所有的解决方案都只是治疗主要问题的症状.如果您希望在所有ajax加载后执行处理程序,那么您可以使用promise.

var ajax1 = $.ajax();
var ajax2 = $.ajax();

jQuery(function($) {
    $.when.apply($, [ajax1, ajax2]).done(function() {
        // your code here
    });
});