Dynamically loading js, css files by html tag data attributes

Question

Can we realize dynamically loading, of js, css and other files, process?

By getting all needed info (what we must to load) from html tags data attributes?

For example:

<html>
    <head>
        <title>Our app</title>
    </head>
    <body data-load-css="style">
        <div class="all" data-load-js="jquery|jqueryui" data-load-js-type="async">
            <div class="header" data-load-js="main">
                Header
            </div>
            <div class="body" data-load-js="body">
                Body
                <div class="some-tipsy" data-load-css="tipsy"></div>
            </div>
            <div class="footer" data-load-js="other">
                Footer
                <div class="some-other" data-load-css="other"></div>
            </div>
        </div>
        <script>
            // our js app to load dynamically js, css
        </script>
    </body>
</html>

So, maybe you have some ideas how do it in best way? With the best performance and flexibility.

Or I just need to use require js, and don't worry about some "new things"? If just require js, then how do it best with this js plugin? To load all stuff most dynamically?

And how solve problem with js async, defer loding? Where some scripts must be loaded in specific order.

Here is my continued version 2 of current question: https://stackoverflow.com/questions/34413940/dynamically-load-js-files-by-html-data-attr-dependencies

But don't you think it would be an overload if you navigate away and then you get back to the page again. It will load the same libs and files again. — Jai, Dec 21 '15 at 07:47
Jai has proposed a good solution, but more context description needed... — MTroy, Dec 21 '15 at 07:49
I don't have very big knowledge at this point. So, I don't want make some crucial mistake by creating main js logic of website. Every idea, solution here pasted by some, is interesting for me. — Vitalij, Dec 21 '15 at 10:48

score 0 · Answer 1 · edited May 23 '17 at 11:58

Following are few ways to load scripts dynamically:

Javascript: Write a custom load function.
jQuery: $.getScript(). For css refer SO-Post.
require.js: require(moduleName)
ECMA 6: import

Following is a pure javascript function to load scripts dynamically:

function(url, callback) {
  var scripts = utils.getLoadedScripts(); // Read all scripts and push names in array.
  var lastIndex = url.lastIndexOf("/");
  var isLoaded = false;
  scripts.forEach(function(row, index) {
    if (row == url.substring(lastIndex + 1)) {
      isLoaded = true;
      return;
    }
  });
  if (!isLoaded) {
    //$(".reveal").addClass("loading");
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.name = "url";

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
  }
};

Thanks, but will be more greatly, if you have some exact code that solving my main problem. Very abstract, simple ) — Vitalij, Dec 21 '15 at 10:51
You can check following [JSFiddle](https://jsfiddle.net/RajeshDixit/pk7v1pmb/) for reference. Hope it helps — Rajesh, Dec 21 '15 at 11:11

Jai · Answer 2 · 2015-12-21T08:23:52.973

0

You could make use of web workers in your case. You can process the code asynchronously to do the task asynchronously.

Main script:

var worker = new Worker('doWork.js');

worker.addEventListener('message', function(e) {
  console.log('Worker said: ', e.data);
}, false);

worker.postMessage(); // Starts the worker to work;

doWork.js (the worker):

self.addEventListener('message', function(e) {
  self.postMessage("Hi, loaded async."); // send the data via postMessage to main script.
}, false);

So, what it means you can put your logic inside doWork.js and put the scripts asynchronously to the user's screen.

edited Dec 21 '15 at 08:23

answered Dec 21 '15 at 08:09

Jai

74,255
12
74
103

Thanks. Can you show code example, when we will load: 2 async js, 2 css files, and 3 js files with defer option? And then have in main js app logic I have possibility to access variables from all loaded scripts? Js files must be loaded by exposed html data attributes on current page. – Vitalij Dec 21 '15 at 10:50
@vital you should show us what you tried and failed to work? Only then we can help you I just posted a path to do this. – Jai Dec 21 '15 at 10:55
Here is more explained: http://stackoverflow.com/questions/34413940/dynamically-load-js-files-by-html-data-attr-dependencies – Vitalij Dec 22 '15 at 10:55

Dynamically loading js, css files by html tag data attributes

2 Answers2