下面是一个通用的跨浏览器JQuery加载器。它检查文档的DOM、HTML、CSS、文件和资源是否完全加载，以及JQuery文件本身是否已解析并正在运行。这个检查器可以在旧的浏览器中工作，并支持旧的Internet Explorer (v. 4-11)以及2001年以来的各种用户代理。它只受到JQuery本身的各种版本的限制，这些版本恰好在这些浏览器中没有bug。可悲的是，很多人都不是。
Keep in mind, you cannot run scripts that rely on JQuery till the JQuery files and any resources used are downloaded, parsed, and JIT compiled. You can also use the code below to test if DOM is processed early in the browser before other resources are downloaded, and run non-JQuery early scripts to work with the DOM. The first function below demonstrates that feature. This assumes only the DOM is built and many CSS, images, and JavaScript files are still not downloaded. This is useful if you need deferred scripts to download early before JQuery and other libraries and manipulate the DOM for some reason.
// EARLY JAVASCRIPT DOM PROCESSING (non-JQuery)
// Function to run as soon as the HTML is parsed and DOM rendered.
function DOMStart(state) {
if (state == null) {
state = "Unknown";
}
alert('DOM State: ' + state);
};
// FULLY LOADED WINDOW/DOCUMENT JAVASCRIPT PROCESSING, plus JQUERY CHECK
// TEST IF JQUERY IS LOADED (without using JQuery)
// Function to run as soon as all resources associated with the document are ready and JQuery script files are loaded.
function JQueryStart(state) {
if (state == null) {
state = "Unknown";
}
alert('JQuery State: ' + state);
//if (typeof window.jQuery !== 'undefined') { // Alt. Version #2 check
if (window.jQuery) {
// jquery is loaded...
alert("JQuery is loaded.");
// JQuery is downloaded. Now use JQuery to test if
// the document object model is fully
// loaded again from the point of view of JQuery.
// In most cases it is based on logic below.
// It is possible to load this function only when the
// DOM is ready instead of the whole document and all
// its files are ready and run a timer to detect when
// "window.jQuery" above is true. That would allow you
// to know JQuery is downloaded prior to the DOM and
// utilize it earlier.
$(document).ready(function () {
// ======== Begin JQuery Scripts ========
});
} else {
// JQuery did not load...
console.log("JQuery failed to load!");
alert("JQuery failed to load!");
}
};
// OLD BROWSER PAGE LOADER: This document loading check
// supports older browsers, including IE4+ and many older
// browsers like Firefox (2006), early Chrome (2010), etc.
// Note: "interactive" is when the document has finished
// loading and the document has been parsed and DOM is complete,
// but sub-resources such as scripts, images, style sheets and
// frames are still loading. "complete" is when all resources
// are loaded and right before the "Window.load event fires.
// Note: "document.onreadystatechange" has support in very old
// browsers amd may have support from IE4+, It fires as each
// state of the docuent load process changes below. IE 4-9 only
// supported "readyState" of "complete".
// If the document is already loaded and those events fired, run the JQuery function above.
if (document.readyState) {
if (document.readyState === "complete" // IE 4-9 only knows "complete"
|| document.readyState === "loaded") {
JQueryStart("Document fully loaded (early)");
} else {
// New browsers should run scripts when the HTML is
// parsed and the DOM built. Older IE browsers will
// not support the "DOMContentLoaded" event and instead
// fire when complete below. This allows newer browsers
// to fire only when the HTML DOM is ready, which happens
// right after the readyState=interactive fires.
if (window.addEventListener) {
// Listen for the "DOMContentLoaded" event, which occurs
// after "interactive" but when the HTML DOM is complete.
// This means the DOM is ready but other resources style
// sheets, other scripts, images, etc. may not be.
window.addEventListener('load', function () {
JQueryStart("Window fully loaded (2)");
}, false);
window.addEventListener('DOMContentLoaded', function () {
DOMStart("DOM complete (early)");
}, false);
} else {
// Run the older page "onreadystatechange" for older
// browsers. Below, runs when page resources are not
// yet fully loaded, so set up event listeners based
// on needs of old/new web browsers script support.
// This fires each time the document readyState changes,
// except in IE 4-9 that only supports "complete". Below,
// the DOM is loaded and parsed, but adding "interactive"
// to the condition below means other resources like CSS,
// images, etc may not have completed yet.
// Note: Add "interactive" below if needing to run early
// scripts as soon as the DOM is complete, and do not require
// styles sheets, script files, images, other resources, etc.
// Note: "interactive" fires before "DOMContentLoaded", but in
// IE 9 - 11 fires too early before parsing.
var isDone = false;
document.onreadystatechange = function () {
if (document.readyState === "complete" // IE 4-9 only knows "complete"
|| document.readyState === "loaded") {
if (!isDone) {
isDone = true;
JQueryStart("Document fully loaded");
}
}
else if (document.readyState === "interactive") {
DOMStart("Document interactive (early)");
}
};
}
}
} else {
// This is a fallback event format that works well in many older browsers.
window.onload = function () {
JQueryStart("Window fully loaded (1)");
};
};
