First of I love this! I'm coming from headJS which is a fantastic loader (core only) a

In an ideal world it would be great to use an async loader (e.g. <code class="notransl

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

parallel loading order about loadjs HOT 7 CLOSED

kubetail-org commented on July 17, 2024

parallel loading order

from loadjs.

Comments (7)

amorey commented on July 17, 2024

Great! I'm happy to hear you like loadjs!

Loadjs is meant to be used only as an async loader so it assumes that the order of the scripts doesn't matter. Internally it iterates through the scripts backwards since that's the fastest, most space efficient way to write a loop:
https://github.com/muicss/loadjs/blob/master/src/loadjs.js#L126

It sounds like you're looking for parallel loading with sequential execution. Can you use <script> tags in the <head> to implement it?

from loadjs.

neuropass commented on July 17, 2024

Hi,
Yes I would like to use parallel loading with sequential execution so the scripts will not fail. :)

I have loadJS initiated here

<script src="/vendors/loadjs.min.js"></script> 
</head>
<body>

and then all my scripts loaded before the

</body>

like this for example:
loadjs(['//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js', '//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js'], 'thunk');

and then some extra to load bits and pieces once all the scripts above are ready:

loadjs.ready(['thunk', 'frmfunc'],
function() {
  // foo.js & bar.js & thunkor.js & thunky.js loaded
    $('a').tooltip({trigger : 'hover',container: 'body'})   
},
function(depsNotFound) {
    if (depsNotFound.indexOf('thunk') > -1) {};  // foo failed
   // if (depsNotFound.indexOf('boostr') > -1) {};  // bar failed
    if (depsNotFound.indexOf('frmfunc') > -1) {};  // thunk failed
});

What should I do to have it working in parallel but respect the sequence?

Thank-you so much again!

from loadjs.

amorey commented on July 17, 2024

This simplest way to fetch files in parallel and execute them in sequence is to use <script> tags in the HTML. For example this will fetch script1.js and script2.js in parallel and execute them in series:

<html>
  <head>
    <script src="/path/to/script1.js"></script>
    <script src="/path/to/script2.js"></script>
  </head>
  <body>
  </body>
</html>

Async loading libraries like loadjs are useful for fetching files after the initial DOM has been rendered to improve performance. For example, you could use loadjs to load Google Analytics after your page has loaded:

<html>
  <head>
    <script src="/path/to/script1.js"></script>
    <script src="/path/to/script2.js"></script>
    <script src="/path/to/loadjs.js"></script>
    <script>
      window.addEventListener('load', function() {
        loadjs(['/path/to/google-analytics.js']);
      });
    </script>
  </head>
  <body>
  </body>
</html>

from loadjs.

neuropass commented on July 17, 2024

The thing is, wouldn't be faster if all is handled by loadjs to take care of all the scripts? also becuase for example you cant really add some scripts before and then some other modules to be loaded with loadjs, because they will be pushed before and therefore certain scripts will still fail... That's why I think loading in parallel but with sequential order should be respected in the loader so you can load all your scripts asych and have consistent result.

from loadjs.

amorey commented on July 17, 2024

In an ideal world it would be great to use an async loader (e.g. loadjs) to fetch scripts in parallel and execute them in series. Unfortunately there many edge cases and currently it's beyond the scope of this particular library. I'd recommend reading this article for a deep dive into script loading:
http://www.html5rocks.com/en/tutorials/speed/script-loading/

Given all the edge cases, the simplest thing to do is to use <script> tags in the <head> when you want to fetch files in parallel and execute them in series, and loadjs to load scripts asynchronously.

What are you trying to do in particular? There are a lot of things you can do with loadjs.done() and loadjs.ready() to keep your script loading fast and simple.

from loadjs.

amorey commented on July 17, 2024

@neuropass I added support for fetching files in parallel and executing them in series via an async: false option:

loadjs(['/path/to/file1.js', '/path/to/file2.js'], {
  success: function() { /* files loaded successfully */ },
  async: false
});

The code is in the loadjs:asyncfalse branch:
https://github.com/muicss/loadjs/tree/asyncfalse

Please try this file and let me know if it works for you:
https://raw.githubusercontent.com/muicss/loadjs/asyncfalse/dist/loadjs.min.js

from loadjs.

amorey commented on July 17, 2024

Support for fetching files in parallel and executing them in series is implemented in v2.0.0:
https://github.com/muicss/loadjs

Let me know if you run into any issues using the feature.

from loadjs.

parallel loading order about loadjs HOT 7 CLOSED

Comments (7)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent