How can I load CSS and JS files when a page is accessed when using Jquery Multi-page layout?

Question

I'm using a multi-page layout for my phonegap application. There are many libraries and I'd like to load them when the logical pages are accessed. Is there an easy way to do this and will it improve performance by keeping the DOM memory lean?

<body> 

<!-- Start of first page: #one -->
<div data-role="page" id="one">

</div><!-- /page one -->


<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">

</div><!-- /page two -->


<!-- Start of third page: #popup -->
<div data-role="page" id="popup">

</div><!-- /page popup -->

</body>

score 0 · Accepted Answer · answered Nov 28 '13 at 05:53

In a multi-page layout, you can just load your scripts once and it gets used by all the pages in side that layout.

You can programically include your scripts/library on a hyperlink click in the page.

Opinions differ on the way this can be implemented.

<script>
    $(document).ready(function() {
        $('#link').bind('click', function(event) {
            $.get('path/script.js').success(function(html) {
                //process
            });

        });
    });

</script>

How can I load CSS and JS files when a page is accessed when using Jquery Multi-page layout?

1 Answers1