我有一个使用$(document).ready的脚本,但它不使用jQuery中的任何其他内容。我想通过删除jQuery依赖项来减轻它。

如何在不使用jQuery的情况下实现我自己的$(document).ready功能?我知道,使用window.onload将不同,因为window.onlead在加载所有图像、帧等后启动。


当前回答

现在是2020年,<script>标签具有defer属性。

例如:

<script src="demo_defer.js" defer></script>

它指定当页面完成解析时执行脚本。

https://www.w3schools.com/tags/att_script_defer.asp

其他回答

如果您正在加载BODY底部附近的jQuery,但在编写jQuery(<func>)或jQuery(document).ready(<func>)时遇到问题,请在Github上查看jqShim。

与其重新创建自己的文档就绪函数,它只需保留这些函数,直到jQuery可用,然后按预期继续jQuery。将jQuery移动到主体底部的目的是加快页面加载速度,您仍然可以通过在模板头部内联jqShim.min.js来实现这一点。

最后我写了这段代码,将WordPress中的所有脚本都移到了页脚,而现在只有这段填充码直接位于页眉中。

这个问题很久以前就被问过了。对于任何看到这个问题的人来说,现在有一个名为“您可能不需要jquery”的网站,它按所需的IE支持级别分解了jquery的所有功能,并提供了一些替代的、较小的库。

IE8文档就绪脚本,根据您可能不需要jquery

function ready(fn) {
    if (document.readyState != 'loading')
        fn();
    else if (document.addEventListener)
        document.addEventListener('DOMContentLoaded', fn);
    else
        document.attachEvent('onreadystatechange', function() {
            if (document.readyState != 'loading')
                fn();
        });
}

我只使用:

setTimeout(function(){
    //reference/manipulate DOM here
});

而且与上面的答案中的document.addEventListener(“DOMContentLoaded”//等不同,它的工作时间可以追溯到IE9——http://caniuse.com/#search=DOMContentLoaded仅表示最近的IE11。

有趣的是,我在2009年偶然发现了这个setTimeout解决方案:检查DOM的准备是否过度?,我的意思是“使用各种框架的更复杂的方法来检查DOM的就绪性是否过分”。

我对这种技术为什么有效的最好解释是,当使用这样一个setTimeout的脚本到达时,DOM正处于解析过程中,因此setTimeout中的代码的执行会延迟到该操作完成。

此处提供的setTimeout/setInterval解决方案仅在特定情况下有效。

该问题在旧版本的Internet Explorer(最高8版)中尤为突出。

影响这些setTimeout/setInterval解决方案成功的变量有:

1) dynamic or static HTML
2) cached or non cached requests
3) size of the complete HTML document
4) chunked or non chunked transfer encoding

解决此特定问题的原始(原生Javascript)代码如下:

https://github.com/dperini/ContentLoaded
http://javascript.nwbox.com/ContentLoaded (test)

这是jQuery团队构建其实现的代码。

跨浏览器(旧浏览器也是)和简单的解决方案:

var docLoaded = setInterval(function () {
    if(document.readyState !== "complete") return;
    clearInterval(docLoaded);

    /*
        Your code goes here i.e. init()
    */
}, 30);

在jsfiddle中显示警报