There is a button on every page of my site. When the button is clicked, a lightbox appears. The content of the lightbox is a form that relies on several JavaScript files including Angular. Those JavaScript files are used only for the form and nowhere else on the site.
In order to reduce page load time, my goal is to load the JavaScript files only after the user clicks the button.
Is there a best practice way of doing this? Some options I can think of are:
Is there a better way?
In order to do that, you will need to: send an AJAX request in your javascript code. parse the request and send back the file via PHP. do your logic in Javascript when the request is responded.
The ready() method is used to make a function available after the document is loaded. Whatever code you write inside the $(document ). ready() method will run once the page DOM is ready to execute JavaScript code.
By understanding your question, You want to lazy-load your js/css/html . You can achieve this using two plugins
Pros :
Cons :
Pros :
OcLazyLoad
is used to load the dependency files and also to inject
the AngularJS modules on the fly.Cons :
So you can use Require.js
to load dependencies between modules listed in code and OcLazyLoad
to inject Angular module on fly . And for your question regarding angular
itself on fly, I don't think you can do that in this case.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With