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

StackOverflow https://stackoverflow.com/questions/20256810

  •  05-08-2022
  •  | 
  •  

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>
Was it helpful?

Solution

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top