Make sure these files are loaded before it run any other script

Question

Hi I have a stylesheet and JavaScript function which loads in all the required files for that template.

However I am having a bit of an issue due to when the other script tags run within the template file (plan js code) it does not wait for the required files to load.

So what you have happening is scripts not recognizing functions and other JS functions.

JS Code

<script type="text/javascript">
 var uid = '{$smarty.session.ipet_user}';

    function stylesheet(url) {
            var s = document.createElement('link');
            s.rel = 'stylesheet';
            s.async = false;
            s.href = url;
            var x = document.getElementsByTagName('head')[0];
            x.appendChild(s);
        }

        function script(url) {
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = url;
            var x = document.getElementsByTagName('head')[0];
            x.appendChild(s);
        }


         (function () {            
                script('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js');
                script('https://apis.google.com/js/api:client.js');
                script('https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBk99v0F4qkmvxifqOD48YktK-QO-3kopI');
                script('./templates/main/user-theme/javascript/google.js');
                script('plugins/getmdlselect/getmdl-select.min.js');
                script('./templates/main/user-theme/javascript/facebook.js');
                script('./templates/main/user-theme/javascript/newprofile.js');
                script('./templates/main/javascript/zipcode.js');

                stylesheet('https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css');
                stylesheet('https://fonts.googleapis.com/css?family=Roboto');
                stylesheet('https://fonts.googleapis.com/icon?family=Material+Icons');
                stylesheet('./templates/main/user-theme/tpl-files/material.act.css');
                stylesheet('plugins/dropzone/dropzone.css');
                stylesheet('plugins/stepper/stepper.min.css');
                stylesheet('./templates/main/user-theme/tpl-files/style.css');
                stylesheet('./templates/main/style/newprofile.css');
                stylesheet('plugins/getmdlselect/getmdl-select.min.css');       



         })();
 </script>

Answer 1

You can use load event of <script> and <link> element, Promise constructor and Promise.all() to return a resolved Promise once all requested resources have loaded by passing an array of URL's to request to Array.prototype.map() where each array of URL's is concatenated to a single array where each function is called which return sa Promise

    function stylesheet_(url) {
      return new Promise(function(resolve, reject) {
        var s = document.createElement('link');
        s.rel = 'stylesheet';
        // s.async = false;
        s.href = url;
        var x = document.getElementsByTagName('head')[0];
        x.appendChild(s);
        s.onload = resolve;
        s.onerror = reject;
      })
    }

    function script(url) {
      return new Promise(function(resolve, reject) {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = url;
        var x = document.getElementsByTagName('head')[0];
        x.appendChild(s);
        s.onload = resolve;
        s.onerror = reject
      })
    }

    function loadStylesAndScripts(styleList = Array(), scriptList = Array()) {
      return Promise.all(
        styleList.map(stylesheet_)
        .concat(scriptList.map(script))
      )
    }

    let requests = loadStylesAndScripts();
    requests.then(function() {
      console.log("styles and scripts loaded")
    })
    .catch(function(err) {
      console.log("an error occurred requesting styles and scripts")
    })