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