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
– David, Commented Mar 9, 2017 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. — user6879622
– user6879622, Commented Mar 9, 2017 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
– David, Commented Mar 9, 2017 at 14:19
well if I knew why it wasn't working I don't think I would be asking — user6879622
– user6879622, Commented Mar 9, 2017 at 14:20
He's asking for a 'module loader', not a 'build/concatenation' tool. — Shilly
– Shilly, Commented Mar 9, 2017 at 14:34

John-Paul Ensign · Accepted Answer · 2017-03-09 14:25:34Z

0

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).

edited Mar 9, 2017 at 14:25

answered Mar 9, 2017 at 14:18

John-Paul Ensign

1418 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mert Akcakaya · Accepted Answer · 2017-03-09 14:43:35Z

0

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>

answered Mar 9, 2017 at 14:43

Mert Akcakaya

3,1792 gold badges33 silver badges43 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:53:57Z

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...');
});

Collectives™ on Stack Overflow

loading js from single file

3 Answers 3

Comments

Comments

Setup

gulpfile.js

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Setup

gulpfile.js

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related