Ladda jQuery endast om det inte finns - CSS-tricks

Anta att du skulle göra en inkludering på en hel massa sidor, och inuti den skulle du vilja göra några jQuery-specifika saker. Den sidan kanske eller kanske inte redan har laddat jQuery. Om det redan gör det vill du inte ladda det igen, men om inte, gör du det. Detta fungerar för det.

Smart asynkront sätt

// Only do anything if jQuery isn't defined if (typeof jQuery == 'undefined') ( if (typeof $ == 'function') ( // warning, global var thisPageUsingOtherJSLibrary = true; ) function getScript(url, success) ( var script = document.createElement('script'); script.src = url; var head = document.getElementsByTagName('head')(0), done = false; // Attach handlers for all browsers script.onload = script.onreadystatechange = function() ( if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) ( done = true; // callback function provided as param success(); script.onload = script.onreadystatechange = null; head.removeChild(script); ); ); head.appendChild(script); ); getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', function() ( if (typeof jQuery=='undefined') ( // Super failsafe - still somehow failed… ) else ( // jQuery loaded! Make sure to use .noConflict just in case fancyCode(); if (thisPageUsingOtherJSLibrary) ( // Run your jQuery Code ) else ( // Use .noConflict(), then run your jQuery Code ) ) )); ) else ( // jQuery was already loaded // Run your jQuery Code );

Lägg märke till hur det finns flera platser där jQuery-koden du tänker köra heter. Upprepa dig inte där, lägg den i en funktion som du kan ringa för att få igång saker.

Den här koden anpassades härifrån.

Document.write sätt

Hippa barn använder inte document.write, men om du är för gammal för att bry dig:

var jQueryScriptOutputted = false; function initJQuery() ( //if the jQuery object isn't available if (typeof(jQuery) == 'undefined') ( if (! jQueryScriptOutputted) ( //only output the script once… jQueryScriptOutputted = true; //output the script (load it from google api) document.write(""); ) setTimeout("initJQuery()", 50); ) else ( $(function() ( // do anything that needs to be done on document.ready // don't really need this dom ready thing if used in footer )); ) ) initJQuery();