← Back to jQuery Course | Chapter 1: Getting Started | Lesson 5 of 6

jQuery CDN Fallbacks

A CDN may sometimes be unavailable. A fallback can load a local copy of jQuery.

In this page:

  1. Why Use a Fallback
  2. Basic Fallback Check
  3. Fallback with Script Creation
  4. Test the Fallback
  5. Keep a Local Copy
Syntax
javascript 
<script src="https://cdn-url/jquery.min.js"></script>
<script>
  window.jQuery || document.write('<script src="local/jquery.min.js"><\/script>');
</script>

Why Use a Fallback

If the CDN goes down or a network blocks it, every script relying on jQuery breaks at once -- a fallback keeps the page working regardless.

Example: Why Use a Fallback

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      $("#output").text(typeof jQuery === "undefined" ? "jQuery failed to load" : "jQuery loaded");
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Basic Fallback Check

A fallback check is just a plain JavaScript if-statement testing typeof jQuery === undefined right after the CDN script tag -- if the CDN failed, jQuery never defined that global, so the check catches it immediately.

Example: Basic Fallback Check

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Check for jQuery</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="output"></div>
  <script>
    $("#resetBtn").click(function () { $("#output").empty(); });
    $("#runBtn").click(function () {
      $("#output").text(typeof jQuery === "undefined" ? "CDN failed to load jQuery" : "jQuery loaded from the CDN - fallback not needed");
    });
  </script>
</body>
</html>

Fallback with Script Creation

When the check fails, JavaScript can use document.write() to inject a new <script> tag pointing at a local copy of the jQuery file, loading it as a backup before the rest of the page's scripts run.

Example: Fallback with Script Creation

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Run the fallback check</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="output"></div>
  <script>
    $("#runBtn").click(function () {
      var loaded = typeof jQuery !== "undefined";
      $("#output").text(loaded ? "jQuery loaded from the CDN, so document.write() of the local jquery.min.js is skipped"
                               : "jQuery missing: document.write('<script src=\"jquery.min.js\"><\/script>') would load the local copy");
    });
    $("#resetBtn").click(function () { $("#output").empty(); });
  </script>
</body>
</html>

Test the Fallback

Logging a message after the fallback logic confirms which source actually provided jQuery -- useful when testing the fallback path deliberately, for example by blocking the CDN in your browser's dev tools.

Example: Test the Fallback

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Check where jQuery loaded from</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="output"></div>
  <script>
    $("#resetBtn").click(function () { $("#output").empty(); });
    $("#runBtn").click(function () {
      $("#output").text(typeof jQuery === "undefined" ? "Loaded from local fallback" : "Loaded from CDN");
    });
  </script>
</body>
</html>

Keep a Local Copy

Keeping a copy of jquery.min.js inside your own project folder means your site never fully depends on a third-party CDN staying online, at the small cost of one extra file to maintain and update.

Example: Keep a Local Copy

javascript 
<!DOCTYPE html>
<html>
<head>
  <!-- Local fallback copy kept at: /js/jquery.min.js -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      $("#output").text("CDN version: " + $.fn.jquery + "- local copy also kept as backup");
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

Document Ready Event · jQuery noConflict Mode · jQuery Syntax · Adding jQuery to a Webpage

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Putting the fallback check before the CDN script tag, so typeof jQuery === "undefined" is always true because jQuery has not had a chance to load.
  2. Testing with if (jQuery === undefined) instead of typeof jQuery, which throws a ReferenceError when jQuery is missing.
  3. Pointing the fallback at a local file path that does not exist, so both the CDN and the backup fail and jQuery is still undefined.
🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson Document Ready Event Next Lesson → jQuery noConflict Mode

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.