0

My HTML is using a lot of js files (10 js files) including jquery js .

There are 4 js files which are not needed instantly ,but later that is when clicked on some button .

Could you please let meknow if is it possible to load js file at required time only ??

My html looks this way 

<html>
   <head>
      <script type="text/javascript" src="js/accordian/jquery-1.9.1.js"></script>
      <script type="text/javascript" src="js/accordian/jquery-ui.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script type="text/javascript" src="js/customerscreen_sub.js"></script>
      <script type="text/javascript" src="js/toppings.js"></script>
      <script type="text/javascript" src="js/crusts.js"></script>
      <script type="text/javascript" src="js/customerorders.js"></script>
      <script type="text/javascript" src="js/common.js"></script>
      <script type="text/javascript" src="js/url.js"></script>
      <script type="text/javascript">
Pawan
  • 31,545
  • 102
  • 256
  • 434
  • 1
    Define "required time" – Benjamin Gruenbaum Sep 07 '14 at 16:46
  • Move them to the bottom of the page and consider concatenating them to reduce the number of requests. Unless they are very large files, the number of separate requests is more of an issue. – Tom Fenech Sep 07 '14 at 16:46
  • simply add the defer/async attrib to the non-vital script tags, they will no longer slow down your page load. you can fetch them on-demand later, but simply deferring them will be 90% as good from a user perceived performance perspective. – dandavis Sep 07 '14 at 17:19

1 Answers1

1

You can use RequireJS to lazily-load the files you need.

http://requirejs.org/

sma
  • 9,449
  • 8
  • 51
  • 80
  • One more js file ?? :) – Pawan Sep 07 '14 at 16:51
  • No, require would replace all of those files in your index.html. It will load your files asynchronously according to a config file you create that tells Require how to load your Javascript. Check out the documentation. – sma Sep 07 '14 at 16:52
  • RequireJS is good for this. But combining your 10 files is also very very very good. HTTP requests still have a lot of overhead. If you bundle all the always-loaded files into 1, that saves a bunch. The rest is for `require`. – Rudie Sep 07 '14 at 16:52
  • This is the right answer to the question, but an opinionated response would be to use `browserify` to bundle all the js files into one. It should make the site load faster. – Conrado Sep 07 '14 at 16:53
  • True, require is not the only solution, but the OP was asking for a way to lazily-load files. Require provides an easy way to do this. I'm a big fan of Browserify too. Just didn't think it was the best answer to the original question. – sma Sep 07 '14 at 16:54