有没有一种明确的JavaScript方法来检查网页是否完全加载?完全加载指的是100%完成,包括HTML、脚本、CSS、图片、插件、AJAX等所有内容!
由于用户交互可能会影响AJAX,因此假设除了初始页面请求之外,页面上没有进一步的用户交互。
由于用户交互可能会影响AJAX,因此假设除了初始页面请求之外,页面上没有进一步的用户交互。
onload
(或DOMReady
)事件触发后才开始运行,这使得使用onload
事件来查看页面是否已加载成为不可能。window.XMLHttpRequest
来告诉网页是否正在执行AJAX请求,但你仍然无法确定像Flash这样的插件是否正在加载或未加载。唯一确定所有内容是否已加载的方法是,在页面中加载任何东西的每一段代码都告诉你的代码它已经完成了加载。
一个可行但不完整的解决方案:你可以尝试用一个函数覆盖XMLHttpRequest
并返回它,这样就可以判断当前是否正在进行AJAX事件。但是,这种解决方案无法查看插件是否已加载,并且你将无法区分在页面加载时触发的AJAX事件和定期发生的AJAX请求,例如Stack Overflow上的请求,如果你有新通知,则更改左上角的Stack Exchange图标。
可以尝试以下代码:
(function(oldHttpRequest){
// This isn't cross-browser, just a demonstration
// of replacing XMLHttpRequest
// Keep track of requests
var requests_running = 0;
// Override XMLHttpRequest's constructor
window.XMLHttpRequest = function() {
// Create an XMLHttpRequest
var request = new oldHttpRequest();
// Override the send method
var old_send = request.send;
request.send = function () {
requests_running += 1;
old_send.apply(request, arguments);
};
// Wait for it to load
req.addEventListener("load", function() {
requests_running -= 1;
}, false);
// Return our modified XMLHttpRequest
return request;
};
window.addEventListener("load", function() {
// Check every 50 ms to see if no requests are running
setTimeout(function checkLoad() {
if(requests_running === 0)
{
// Load is probably complete
}
else
setTimeout(checkLoad, 50);
}, 50);
}, false);
})(window.XMLHttpRequest)
window.onLoad = function(){
//Stuff to do when page has loaded.
}
或者
<body onLoad="functionCall()">
这是:
window.onload
事件将在此时触发。
if (window.addEventListener) {
window.addEventListener("load", myfunction, false);
} else {
window.attachEvent("onload", myfunction);
}
function myfunction() {
...
}
window.onload
事件完全相同。由于 AJAX 可以在页面加载之后很长时间调用(并且它是异步的),所以 AJAX 请求的“加载”不是 onload 事件的一部分。如果您在页面加载时已经执行了 AJAX 请求,则必须添加一个侦听器到 window.load 事件和一个到 AJAX 完成事件… 在两个侦听器中设置全局标志,并检查是否已经触发了另一个侦听器。如果没有,除了设置标志外,什么都不做。 - roberkuleswindow.onload
、document.readyState
和 AJAX 请求的回调函数的组合,您应该能够实现想要的功能。只需确保窗口已加载,DOM 已准备好进行操作,并跟踪 AJAX 请求。===
总请求量时触发函数。如果您不知道 AJAX 请求的数量,但知道哪个请求会最后完成,只需在其完成时触发回调函数即可。window.onload
或 document.ready
是否跟踪这些应用程序),您还可以记录应用程序中加载的数据量,并在已加载的数据量 ===
总数据量时,让应用程序触发一个函数或将变量递增到页面上。window.onload = function() {
var time = window.setInterval(function() {
if(document.readyState == "interactive") {
increment();
window.clearInterval(time);
}
}, 250);
}
var total = 10, current = 0;
var increment = function() {
current += 1;
if(current === total) { weAreDone(); }
}
function weAreDone() {
// Everything should be done!
}
function scriptLoaded(e) {
var oLoadedScript = e.target || e.srcElement;
alert ('loaded : ' + oLoadedScript.src);
return false;
}
/**
* Import js lib and fire function ControlData on events
* @param js_librairies
* @returns {Boolean}
*/
function init(){
// lib import
// Locate js in the div
var myscript_location = document.getElementById('js_script_goes_here');
// DEBUG
if (undefined == myscript_location)
alert('div not found');
else
alert('found div : ' + myscript_location);
// to prevent js script from catching in dev mode
var force_js_reload = "?version=1" ;
for (var i=0; i < js_librairies.length ; ++i) {
var my_script = document.createElement('script');
my_script.defer = false;
my_script.src = relative_path + js_librairies[i] + force_js_reload ;
my_script.type = 'text/javascript';
// DEBUG
my_script.onload = scriptLoaded;
myscript_location.appendChild(my_script);
}
return false;
}
/**
* Start non intrusive js
* @param func
*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
}
//ONLOAD
addLoadEvent(init);
alert()
,它甚至覆盖了其他代码可能设置的任何window.onload
处理程序... - Jani Hartikainenfunction r(f){/in/(document.readyState)?setTimeout(r,9,f):f()}
提供者:史上最小的DOMReady代码 - Dustin Diaz
更新:适用于IE
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
附言: window.onload
是一件非常不同的事情
onload
投下反对票。 - naveen