Practice Now
jQuery Mobile
asynchronous script loading
web development
JavaScript
performance optimization

Load jQuery Mobile script asynchronously?

Data Structures & Algorithms practice on Codemia

Step through 300 algorithm problems with animated visualisers that show the data structure changing as the code runs.

Practice algorithms
Complexity & PerformanceConcurrencyJavaScript & Web

Introduction

You can load jQuery Mobile without blocking initial page parsing, but you cannot treat it like an independent script. jQuery Mobile depends on jQuery, and many projects also need to register mobileinit configuration before jQuery Mobile executes, so the real problem is preserving order while still avoiding parser blocking.

Why Plain async Usually Fails

If you place two independent async script tags on the page, the browser can execute them in whichever order finishes downloading first. That is fine for unrelated scripts, but not for jQuery Mobile:

  • jQuery must exist before jQuery Mobile runs
  • 'mobileinit handlers must usually be attached after jQuery loads but before jQuery Mobile loads'

So the direct answer is: yes, asynchronous loading is possible, but not by sprinkling async on both files and hoping the order stays stable.

The Safest Static Option: defer

If the scripts are known at page load time, defer is often simpler than async. Deferred scripts download without blocking HTML parsing, and they execute in document order.

html
1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>jQuery Mobile with defer</title>
6    <script defer src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
7    <script defer src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
8  </head>
9  <body>
10    <div data-role="page">
11      <div data-role="header"><h1>Hello</h1></div>
12      <div role="main" class="ui-content">Loaded without parser blocking.</div>
13    </div>
14  </body>
15</html>

That already solves most "load asynchronously" goals because the browser does not block parsing while the files download.

If You Need Dynamic Loading

If you truly need runtime loading, load the files sequentially in JavaScript. The example below waits for jQuery to load, registers the mobileinit hook, then loads jQuery Mobile.

html
1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Dynamic jQuery Mobile loader</title>
6  </head>
7  <body>
8    <p id="status">Loading…</p>
9
10    <script>
11      function loadScript(src) {
12        return new Promise((resolve, reject) => {
13          const script = document.createElement("script");
14          script.src = src;
15          script.async = true;
16          script.onload = resolve;
17          script.onerror = () => reject(new Error(`Failed to load ${src}`));
18          document.head.appendChild(script);
19        });
20      }
21
22      async function boot() {
23        await loadScript("https://code.jquery.com/jquery-1.11.1.min.js");
24
25        $(document).on("mobileinit", function () {
26          $.mobile.ajaxEnabled = false;
27        });
28
29        await loadScript("https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js");
30
31        document.getElementById("status").textContent = "jQuery Mobile loaded.";
32      }
33
34      boot().catch((error) => {
35        document.getElementById("status").textContent = error.message;
36      });
37    </script>
38  </body>
39</html>

The async attribute is still used on the dynamically created script elements, but sequencing is now controlled by the promise chain instead of by network timing.

What to Configure Before jQuery Mobile Loads

Many legacy examples forget the configuration timing. If you need to change jQuery Mobile behavior, define that setup before the library executes. In dynamic loading, that means:

  1. load jQuery
  2. register mobileinit
  3. load jQuery Mobile

If you reverse steps two and three, the configuration may be ignored because the framework has already initialized.

Performance Reality Check

jQuery Mobile is a legacy library, so performance wins from clever loading are usually smaller than wins from reducing page size, image weight, and unused widgets. Script order bugs are far more common than genuine network bottlenecks in old jQuery Mobile codebases.

That is why defer is often the best engineering choice. It is simpler, easier to debug, and already non-blocking for HTML parsing.

Common Pitfalls

  • Using plain async on both jQuery and jQuery Mobile and assuming dependency order will hold.
  • Registering mobileinit after jQuery Mobile has already executed.
  • Treating async and defer as interchangeable. They solve different ordering problems.
  • Dynamically loading the script but forgetting error handling, which makes failures look like random undefined-symbol bugs.
  • Optimizing script loading while ignoring the larger cost of heavy page markup, images, or obsolete widgets.

Summary

  • jQuery Mobile can be loaded without blocking parsing, but dependency order must be preserved.
  • For static pages, defer is usually the simplest and safest answer.
  • For dynamic loading, load jQuery first, then register mobileinit, then load jQuery Mobile.
  • Plain parallel async tags are unreliable for dependent libraries.
  • In legacy jQuery Mobile apps, correctness usually matters more than squeezing out tiny loader optimizations.
Related reading
Course
Intermediate
27 lessons
15 hours
DSA Fundamentals

Master algorithmic patterns and data structures through hands-on LeetCode-style problems - from arrays and hashing to dynamic programming and advanced graphs.

View the course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Data Structures & Algorithms practice on Codemia

Step through 300 algorithm problems with animated visualisers that show the data structure changing as the code runs.

Practice algorithms
Codemia
© 2026 Codemia
Resources
Legal
Social
All Rights Reserved.