Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<title>Load JQuery with Javascript - Allow multiple instances for widgets</title>
</head>
<body>
<b>Incomplete</b> - please modify to check if JQuery file has loaded rather than if window has loaded.<br /><br />
  
  In IE 8, only loads JQuery 10% of the time.<br/>
  100% in Chrome.<br /><br />
  
<b>About Loading JQuery with Javascript</b><br />
When placing multiple widgets on a page, the header of the page may not always contain a JQuery include file.<br /><br />
​
This acts as a backup for fetching the jQuery when it is not in the header.<br />
(Loading is slower if JQuery is NOT included in the header.)<br /><br />
  
We're avoiding simply including the JQuery file in the widget code because: (1) sometimes the include file has to be in the header, and (2) we only want one instance of the JQuery file loaded for optimal performance.<br /><br />
​
</body>
</html>
 
 // Placed first to give JQuery a chance to load.
        if (typeof jQuery == 'undefined') {
            var script = document.createElement('script');
            script.type = "text/javascript";
            script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js";
            document.getElementsByTagName('head')[0].appendChild(script);
        }
​
        function addLoadEvent(func) {
            // Try to load JQuery again.
            if (typeof jQuery == 'undefined') {
                var script = document.createElement('script');
                script.type = "text/javascript";
                script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js";
                document.getElementsByTagName('head')[0].appendChild(script);
            }
​
            // If no JQuery, wait for load.
            // BUG: window.onload occurs before JQuery loads.
            // Please alter so this checks that the JQuery file has loaded instead of the window.
            if (typeof jQuery == 'undefined') {
                // Explains how addLoadEvent is used by multiple functions
                // http://www.webreference.com/programming/javascript/onloads/
                // http://simonwillison.net/2004/May/26/addLoadEvent/
                var oldonload = window.onload;
                if (typeof window.onload != 'function') {
                    window.onload = func;
                } else {
                    window.onload = function () {
                        if (oldonload) {
                            oldonload();
                        }
                        func();
                    };
                }
            } else {
                func();
            }
​
            // Maybe "IsReady" could be used:
            // http://bugs.jquery.com/ticket/4889
        }
​
        // This is an alternative to: $(document).ready(function (){}) 
        // Use for widgets when JQuery include file may not be in page header.
        addLoadEvent(function () {
            if (typeof jQuery != 'undefined') {
                alert("JQuery has been loaded.");
            } else {
                alert("No JQuery.");
            }
        });
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers