我有一个使用$(document).ready的脚本,但它不使用jQuery中的任何其他内容。我想通过删除jQuery依赖项来减轻它。
如何在不使用jQuery的情况下实现我自己的$(document).ready功能?我知道,使用window.onload将不同,因为window.onlead在加载所有图像、帧等后启动。
我有一个使用$(document).ready的脚本,但它不使用jQuery中的任何其他内容。我想通过删除jQuery依赖项来减轻它。
如何在不使用jQuery的情况下实现我自己的$(document).ready功能?我知道,使用window.onload将不同,因为window.onlead在加载所有图像、帧等后启动。
当前回答
此处提供的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团队构建其实现的代码。
其他回答
一旦DOM就绪,此跨浏览器代码将调用函数:
var domReady=function(func){
var scriptText='('+func+')();';
var scriptElement=document.createElement('script');
scriptElement.innerText=scriptText;
document.body.appendChild(scriptElement);
};
以下是它的工作原理:
domReady的第一行调用函数的toString方法,以获取传入函数的字符串表示形式,并将其包装在立即调用该函数的表达式中。domReady的其余部分使用表达式创建一个脚本元素,并将其附加到文档正文中。DOM就绪后,浏览器运行附加到主体的脚本标记。
例如,如果您这样做:domReady(function(){alert();});,以下内容将附加到body元素:
<script>(function (){alert();})();</script>
注意,这只适用于用户定义的函数。以下命令不起作用:domReady(警报);
使用纯JavaScript的最简单方法。没有jQuery:
document.addEventListener("DOMContentLoaded", function(event) {
// Your code to run since DOM is loaded and ready
});
(function(f){
if(document.readyState != "loading") f();
else document.addEventListener("DOMContentLoaded", f);
})(function(){
console.log("The Document is ready");
});
与jQuery相比,使用JavaScript等价物总是很好的。一个原因是依赖的库少了一个,而且它们比jQuery等同物快得多。
jQuery等价物的一个极好的参考是http://youmightnotneedjquery.com/.
就您的问题而言,我从上面的链接中获取了以下代码:)唯一需要注意的是,它仅适用于Internet Explorer 9及更高版本。
function ready(fn) {
if (document.readyState != 'loading') {
fn();
}
else {
document.addEventListener('DOMContentLoaded', fn);
}
}
试试看:
function ready(callback){
if(typeof callback === "function"){
document.addEventListener("DOMContentLoaded", callback);
window.addEventListener("load", callback);
}else{
throw new Error("Sorry, I can not run this!");
}
}
ready(function(){
console.log("It worked!");
});