Geek Answers Handbook

Code optimization for jQueryMobile: problems with selective inclusion of external JS files only when they are needed

I am using jQueryMobile for a mobile application. Obviously, I want the user interface to load very quickly, but the application has more than one tool, so I want to load only the corresponding external JS libraries for the “pages” when they move. For the main application (90% of the pages), I just need the main jQueryMobile files (i.e. the latest jquery core from the Google AJAX and jQueryMobile JS and CSS libraries). However, for the remaining 10%, I need Google Maps v3 with geolocation support enabled (so the external Google Gears library) and the MarkerClusterer library (I have> 400 markers that I want to build only if I need to).

As I understand how jQueryMobile works (all through internal AJAX requests), you must have all the libraries to load the entire application when the application is initialized. This makes my application really difficult when the user first requests a mobile site (all main files, as well as all map / getter / marker cluster files). I want to avoid this, as it will scare many potential users (especially when only a subset of my users want the goodwill of geolocation).

I tried to load only Google Maps components at the end of the corresponding page (before the footer), and also tried to put them in the <head> tag on the corresponding page. However, both of them are not initialized (checked with the output console.log () attached to the functions).

And yes, before you ask, I use the live () function for pagecreate and refer to the correct div (if I put everything related to Google Maps in the title tag of the main page, everything works as best as possible)

It seems to me that this should be a fairly common question: selective loading of page components using jQueryMobile. I could not find anything on the Internet through Google - most jQueryMobile tutorials are a shared Hello World garden! variety, so if you have something to offer, I’m all ears! Links to custom download tutorials are also welcome!

Thanks in advance!

+5
source share
3 answers

.

, , / - . . , , .

, , , , .

:

  • : , forst, rel="external" . , , JQM, .
  • : JQM JS, div page. , , , , lib domready, . , ( JQM) . . :
    • ,
    • pagesomething

: , pageshow pagecreate, , - , .

+3

! jQuery Mobile. naugtur, - div

<script>
if(typeof MyFunction == "undefined") {
    $.getScript('myfunction.js', function() {
        // initialize if necessary
    });
}
</script>

, Google, , jsload .

+1

, head.js ? js , , js js-

0

More articles:


All Articles