jQuery Mobile in a large page (2mb)

jQuery Mobile in a large page (2mb)

I'm converting a legacy application to be mobile friendly and using jQuery Mobile. So far so good until I found this large page (2MB) where browser hangs when it loads. If I remove the jQuery Mobile references from the page, it loads without a problem.

So I'm guessing it hangs when it re-write the DOM with jQuery Mobile styles. But most of the controls (80%) are "display:none;" at the page load; Is there a way to jQuery Mobilize only the controls that are visible at the page load?

This is a badly designed page anyway and can't be rewritten to have a smaller size page now; because it will affect a lot of other places and the deadlines are too aggressive.

Please give your ideas on how to handle this.

I've put the page here https://www.dropbox.com/s/0ietxvgudky95lv/dosurvey2.aspx?m