loading js from single file

Question

I have 4 js files I want to load from a single file.

in my footer I have the following link

<script src="content/vendor/js/utils.js"></script>

utils.js is the main file.

the files I want to load are in content/vendor/js/gsap

I have the following code in my utilities file but it does not seem to load the files because the effects stop working.

// JavaScript Document
=== all.js ===
(function() {
    'use strict';
    var a = [
       'TweenMax.min',
       'ScrollMagic',
       'animation.gsap',
       'jquery.placeholder',
       ...
    ];
    var i;
    var s = [];
    for (i = 0; i < a.length; i += 1) {
        s = s.concat(['<script src="/gsap/', a[i], '.js"></script>']);
    }
    document.write(s.join(''));
}());

`"it does not seem to load the files"` - Then what *does* it do? When you debug this, how specifically is it failing? — David, Mar 09 '17 at 14:16
I have pin effects and text effects once I comment out the full links in the main page and use the single page with them included the animations stop working. — Case, Mar 09 '17 at 14:17
That's unfortunate, but "stuff doesn't work" isn't really an answerable question. Use your browser's debugging tools to determine what ***is*** happening when you run this code. What output do you expect from the code in the question, and what output is it actually giving you? — David, Mar 09 '17 at 14:19
well if I knew why it wasn't working I don't think I would be asking — Case, Mar 09 '17 at 14:20
And we can help you determine what the problem is, if you can provide information about that problem. You could start by at least *looking* at the results of your code. Stack Overflow can be very helpful, but this community isn't a replacement for any effort at all on your part. — David, Mar 09 '17 at 14:22
You have to escape the slash in the closing script tag or split up the string more, if you want to document.write. The better idea though, is to never use document.write and just create new script ndoes and append them. This will immediately download and execute the scripts once the script tag gets inserted and gets around the issues with document.write + script tags, since document.write gets really confused about the closing tag. — Shilly, Mar 09 '17 at 14:23
Why don't you create a [Gulp script](http://stackoverflow.com/a/26719941/1762224) to do this for you??? — Mr. Polywhirl, Mar 09 '17 at 14:28
He's asking for a 'module loader', not a 'build/concatenation' tool. — Shilly, Mar 09 '17 at 14:34

John-Paul Ensign · Answer 1 · 2017-03-09T14:25:34.853

I understand that you might want to do this in a single JavaScript file, but it seems to add unnecessary overhead.

I have 4 js files I want to load from a single file

You can place all of those into a single html file and use an link tag:

<link rel="import" href="js-loader.html">

In js-loader.html:

<script src="/gsap/TweenMax.min.js"></script>
<script src="/gsap/ScrollMagic.js"></script>
<script src="/gsap/animation.gsap.js"></script>
<script src="/gsap/jquery.placeholder"></script>

This is how it is done at the company I work at, plus it seems a bit more readable (though that is our opinion).

score 0 · Answer 2 · edited May 23 '17 at 11:53

If you are concerned with performance, you may want to create a single JavaScript file using a utility like Gulp. This will also handle the minification for you.

Here's an easy setup guide.

Setup

Download NodeJS
Install gulp

gulpfile.js

var gulp   = require('gulp'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('scripts', function() {
  gulp.src([
       'TweenMax.min',
       'ScrollMagic',
       'animation.gsap',
       'jquery.placeholder'
      ].map(name => '/gsap/' + name + '.js'))
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist'))
});

Then run this command.

gulp scripts

Finally, include this in your HTML.

<script src="dist/all.js"></script>

If you really want to load them dynamically, here is a script that was written by user nemisj.

function loadScripts(array, callback) {
  const loader = (src, handler) => {
    let script = document.createElement('script');
    script.src = src;
    script.onload = script.onreadystatechange = () => {
      script.onreadystatechange = script.onload = null;
      handler();
    }
    let head = document.getElementsByTagName('head')[0];
    (head || document.body).appendChild(script);
  };
  (function run() {
    array.length != 0 ? loader(array.shift(), run) : (callback && callback())
  })();
}

loadScripts([
  'TweenMax.min',
  'ScrollMagic',
  'animation.gsap',
  'jquery.placeholder'
].map(name => '/gsap/' + name + '.js'), function() {
  alert('Finished loading scripts...');
});

score 0 · Answer 3 · answered Mar 09 '17 at 14:43

The function below does the trick for me. It links the files second.js and third.js to the document. index.js is:

// index.js
(function () {
    var paths = ['second', 'third'];
    for (path in paths) {
        var script = document.createElement('script');
        script['src'] = paths[path] + '.js';

        document.body.appendChild(script);
    }
}());

And the index.html is:

// index.html
<!doctype html>
<html>

<head>

</head>

<body>
    <script src="index.js"></script>
</body>

</html>

loading js from single file

3 Answers3

Setup

gulpfile.js