Question

我希望在页面准备好后立即将一些元素附加到DOM。我尝试将它放在一个名为$(document).ready()的函数中，但如果我这样做，查找$('#id')元素就会失败。如果我等待并通过控制台或使用超时执行相同的命令，则成功。

我在开发的这个阶段没有任何花哨的字体或图像，修改DOM不应该依赖于CSS加载。 $(document).ready()修改DOM真的太快了吗？我该怎么用？

以下是相关的代码段：

var thing = {
  init: function(){
    this.add('Thing 1', 'thing1', 'id1');
    this.add('Thing 2', 'thing2', 'id2');
  },
  add: function(name, dom_id, type){
    var box = $('<div/>', {id: dom_id, 'class': 'item-box'});
    box.append($('<div/>', {'class': 'item-name', text: name}));
    var container = $('#' + type);
    container.append(box);
  }
};
$(document).ready(thing.init());

在html中，具有ID id1和id2的项目是静态定义的。失败的行是var container = $('#' + type);。我最初在线调用这个调用，但是将其分开进行调试。在代码中此时container未定义。

如果我稍后通过命令行或超时运行add函数，它可以正常工作。

Answer 1

此代码：

$(document).ready(thing.init());

立即运行thing.init()，然后将返回值传递给.ready()，这不是非常有用：）

您需要在匿名函数中包装调用，以便它仅在文档准备就绪时运行。

$(document).ready(function() {
    thing.init();
});

或者，使用稍短的版本：

jQuery(function($) {
    thing.init();
});

Answer 2

您可以在实际加载页面后立即使用window.onload执行脚本：

window.onload = function() {
   //Code Here
};

Answer 3

只要加载DOM，就可以使用DOMContentLoaded来执行代码

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    //Code Here
  });
</script>

Answer 4

加载HTML内容时会激活

$(document).ready()，而$(window).load()会等待加载所有资产。

哪里＆＃34;安全＆＃34;表示已加载所有，$(window).load()是您正在寻找的内容。

以下说明load之后ready点火：

演示：http://jsfiddle.net/3nn5u0k4/

标记

<div id="debug">
  <!--load times in millisecons get appended here-->
</div>
<img src="http://upload.wikimedia.org/wikipedia/commons/4/43/Very_Large_Array,_2012.jpg"/>

JS

$(document).ready(function(){
    var t = new Date();
    t = t.getUTCMilliseconds();
    $('#debug').append('<p>HTML document loaded: ' + t + '</p>');
});

$(window).load(function(){
    var t = new Date();
    t = t.getUTCMilliseconds();
    $('#debug').append('<p>HTML document loaded: ' + t + '</p>');
});

Answer 5

您可以使用setTimeout（）

setTimeout(function(){
   alert("execute your action now...")
}, 1000);

这就是我猜测你的帖子。但如果您的帖子中包含您的代码，那会更好。

编辑：

现在OP发布了代码

$(document).ready(function(){
    thing.init();
});

在尝试修改页面加载的DOM之前，我应该等多久？

5 个答案:

演示：http://jsfiddle.net/3nn5u0k4/

标记

JS