纯JavaScript相当于jQuery的$ .ready（） - 如何在页面/ DOM准备就绪时调用函数好吧，这可能只是一个愚蠢的问题，但我确信还有很多其他人不时会问同样的问题。我，我只是想以任何方式100％确定。有了jQuery，我们都知道这很精彩$('document').ready(function(){});但是，假设我想运行一个用标准JavaScript编写的函数，没有库支持它，并且我想在页面准备好处理它时立即启动一个函数。什么是正确的方法来解决这个问题？我知道我能做到：window.onload="myFunction()";......或者我可以使用body标签：<body onload="myFunction()">...或者我甚至可以在所有内容之后尝试在页面底部，但结尾body或html标记如：<script type="text/javascript">
myFunction();</script>什么是以jQuery方式发布一个或多个函数的跨浏览器（旧/新）兼容方法$.ready()？
4 回答
元芳怎么了
TA贡献1798条经验 获得超7个赞
我想在这里提到一些可能的方法以及适用于所有浏览器的纯javascript技巧：
// with jQuery
$(document).ready(function(){ /* ... */ });
// shorter jQuery version
$(function(){ /* ... */ });
// without jQuery (doesn't work in older IEs)
document.addEventListener('DOMContentLoaded', function(){
// your code goes here
}, false);
// and here's the trick (works everywhere)
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
// use like
r(function(){
alert('DOM Ready!');
});
正如原作者所解释的，这里的技巧是我们正在检查document.readyState属性。如果它包含字符串in（在uninitialized和中loading，前5 个中的前两个DOM就绪状态），我们设置超时并再次检查。否则，我们执行传递的函数。
这里是适用于所有浏览器的技巧的jsFiddle 。
感谢Tutorialzine将其纳入本书。
芜湖不芜
TA贡献1796条经验 获得超7个赞
如果您正在使用没有jQuery的VANILLA普通JavaScript，那么您必须使用（Internet Explorer 9或更高版本）：
document.addEventListener("DOMContentLoaded", function(event) {
// Your code to run since DOM is loaded and ready});以上是jQuery的等价物.ready：
$(document).ready(function() {
console.log("Ready!");});这也可以写成速记这样，这jQuery将就绪后运行，即使发生。
$(function() {
console.log("ready!");});不要与下面的混淆（这不是为DOM做好准备）：
不要使用像这样自行执行的IIFE：
Example:(function() {
// Your page initialization code here - WRONG
// The DOM will be available here - WRONG})();此IIFE不会等待您的DOM加载。（我甚至在谈论最新版的Chrome浏览器！）
添加回答
举报
0/150
提交
取消