我有一个使用$(document).ready的脚本,但它不使用jQuery中的任何其他内容。我想通过删除jQuery依赖项来减轻它。
如何在不使用jQuery的情况下实现我自己的$(document).ready功能?我知道,使用window.onload将不同,因为window.onlead在加载所有图像、帧等后启动。
我有一个使用$(document).ready的脚本,但它不使用jQuery中的任何其他内容。我想通过删除jQuery依赖项来减轻它。
如何在不使用jQuery的情况下实现我自己的$(document).ready功能?我知道,使用window.onload将不同,因为window.onlead在加载所有图像、帧等后启动。
当前回答
只需将其添加到HTML页面的底部。。。
<script>
Your_Function();
</script>
因为,HTML文档是按上下顺序解析的。
其他回答
简而言之,我们可以使用JavaScript方法来代替jQuery中使用的$(document).ready():
<script>
document.addEventListener("DOMContentLoaded", function_name, false);
function function_name(){
statements;
}
</script>
因此,当页面准备就绪(即DOMContentLoaded)时,将调用函数function_name()。
我最近在一个移动网站上使用这个。这是John Resig的简化版“Pro JavaScript技术”。它取决于addEvent。
var ready = ( function () {
function ready( f ) {
if( ready.done ) return f();
if( ready.timer ) {
ready.ready.push(f);
} else {
addEvent( window, "load", isDOMReady );
ready.ready = [ f ];
ready.timer = setInterval(isDOMReady, 13);
}
};
function isDOMReady() {
if( ready.done ) return false;
if( document && document.getElementsByTagName && document.getElementById && document.body ) {
clearInterval( ready.timer );
ready.timer = null;
for( var i = 0; i < ready.ready.length; i++ ) {
ready.ready[i]();
}
ready.ready = null;
ready.done = true;
}
}
return ready;
})();
实际上,如果您只关心Internet Explorer 9+,那么这段代码就足以取代jQuery.ready:
document.addEventListener("DOMContentLoaded", callback);
如果您担心Internet Explorer 6和一些非常奇怪和罕见的浏览器,这将奏效:
domReady: function (callback) {
// Mozilla, Opera and WebKit
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", callback, false);
// If Internet Explorer, the event model is used
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", function() {
if (document.readyState === "complete" ) {
callback();
}
});
// A fallback to window.onload, that will always work
} else {
var oldOnload = window.onload;
window.onload = function () {
oldOnload && oldOnload();
callback();
}
}
},
此处提供的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团队构建其实现的代码。
如果您正在加载BODY底部附近的jQuery,但在编写jQuery(<func>)或jQuery(document).ready(<func>)时遇到问题,请在Github上查看jqShim。
与其重新创建自己的文档就绪函数,它只需保留这些函数,直到jQuery可用,然后按预期继续jQuery。将jQuery移动到主体底部的目的是加快页面加载速度,您仍然可以通过在模板头部内联jqShim.min.js来实现这一点。
最后我写了这段代码,将WordPress中的所有脚本都移到了页脚,而现在只有这段填充码直接位于页眉中。