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();
});

加载事件在文档加载过程结束时触发。在至此，文档中的所有对象都在DOM中，而且都是图像和子帧已完成加载，Reference

Answer 2

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

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

Answer 3

尝试窗口加载事件：

$(window).load(function() {
    //Stuff here
});

Answer 4

确定，请尝试窗口load

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

Answer 5

之前（有时候，开始时没有绝对加载，几分钟后（0-200ms左右））：

$(document).ready(function(){
$('body').hide(0);
});

后：

$(window).load(function(){
$('body').delay(500).show(0);
});

Answer 6

在我使用AJAX和HTML的情况下。函数$（document）.ready（）和$（window）.load（）有同样的问题。我通过将事件的处理程序（应该在HTML DOC中工作）添加到AJAX reguest完成后运行的jQuery函数来解决了这个问题。阅读：" jQuery.post()"（函数中的第三个参数）。

在我的代码中，它看起来像这样：

var RequestRootFolderContent = function(){
    $.post(
        'PHP/IncludeFiles/FolderContent.inc.php',
        function(data){
            $('[class~="folder-content"]').html(data);

            //Here what you need
            $('[class~="file"]').dblclick(function(){
                alert("Double click");
            });
        }
    )
}

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

6 个答案: