9

奇怪的情况：

我正在使用jQueryand构建一个菜单栏CSS。
在我的 JavaScript 文件中，我有一个on-ready这样的函数：

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

和...

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

出于某种原因，即使在所有文档完成加载之前，我也会收到宽度不正确的警报消息。只有当我发布消息时，文档的其余部分才会加载，并且我得到了应有的正确宽度。

为什么在所有文档完成加载之前调用我的函数？有没有办法仅在某个元素完成加载（例如：nav元素）之后才加载函数？

4

6 回答 6

13

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

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

load 事件在文档加载过程结束时触发。至此，文档中的所有对象都在DOM中，所有的图片和子帧都已经加载完毕，参考

于 2013-04-19T18:11:15.093 回答
8

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

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

jQuery(function($) {
    $.when.apply($, [ajax1, ajax2]).done(function() {
        // your code here
    });
});
于 2013-04-19T18:16:44.227 回答
3

尝试窗口加载事件：

$(window).load(function() {
    //Stuff here
});
于 2013-04-19T18:11:39.483 回答
2

可以肯定的是，尝试窗口load

$(window).load(function(e) {
    mark_active_menu();
}
于 2013-04-19T18:11:39.333 回答
0

之前（有时，在开始时不会绝对加载，几毫秒之后（大约 0-200 毫秒））：

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

后：

$(window).load(function(){
$('body').delay(500).show(0);
});
于 2015-06-21T06:59:53.390 回答
0

在我使用 AJAX 和 HTML 的情况下。我对函数 $(document).ready() 和 $(window).load() 有同样的问题。我通过将我的事件处理程序（应该在 HTML DOC 中工作）添加到在 AJAX 请求完成后立即运行的 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");
            });
        }
    )
}
于 2016-07-07T09:10:52.440 回答