How to Disable the Loading Animation in jQuery Mobile

If you’re working with jQuery Mobile, you may have noticed that a “Loading…” animation appears when transitioning between pages.

Sounds helpful, right?
Well—not always.

In my case, I needed to scroll the page so a specific element would appear at the top, but the loading animation was blocking the scroll from working properly. The animation hijacked the transition, and I couldn’t get the behavior I wanted.

So I dug into the jQuery Mobile docs and found how to disable it.

The Fix: Disable jQuery Mobile’s Default Loading Behavior

Here’s how to turn off the automatic loading spinner and AJAX page transitions in jQuery Mobile.

✅ Step-by-step:

Load jQuery first
Always include jQuery before jQuery Mobile.

<script src="/jquery-1.7.1.js"></script>

Set mobileinit before loading jQuery Mobile
Inside this block, you can override default jQuery Mobile settings.

<script>
  $(document).on("mobileinit", function () {
      // Disable AJAX navigation
      $.mobile.ajaxEnabled = false;

      // Disable the loading spinner
      $.mobile.loadingMessage = false;
  });
</script>

Load jQuery Mobile after mobileinit

<script src="/jquery.mobile-1.0a3.min.js"></script>

What These Settings Do

$.mobile.ajaxEnabled = false;
Disables jQuery Mobile’s default AJAX-based page loading. Each link acts like a normal link, and the full page reloads. This also improves compatibility when dealing with scrolling issues.
$.mobile.loadingMessage = false;
Turns off the default “Loading…” overlay animation.

Why This Works

When jQuery Mobile handles a page transition via AJAX, it shows a loading overlay. This temporarily blocks the UI, which can interfere with things like:

scrollTop positioning
automatic scroll behavior
dynamic focus to elements

By disabling the animation and AJAX behavior, your scripts regain control—and everything works like regular HTML again.

Final Thoughts

Sometimes, jQuery Mobile’s “helpful” features do more harm than good, especially when you need precise control over the scroll or layout.

Just remember:

You must place the mobileinit configuration before loading the jQuery Mobile library.

Once I disabled the loading animation, scrolling worked perfectly again. 🎯