Tengo 4 archivos js que quiero cargar desde un solo archivo.
en mi pie de página tengo el siguiente enlace
<script src="content/vendor/js/utils.js"></script>utils.js es el archivo principal.
los archivos que quiero cargar están en content/vendor/js/gsap
Tengo el siguiente código en mi archivo de utilidades pero parece que no carga los archivos porque los efectos dejan de funcionar.
// 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('')); }());Entiendo que es posible que desee hacer esto en un solo archivo JavaScript, pero parece agregar una sobrecarga innecesaria.
Tengo 4 archivos js que quiero cargar desde un solo archivo
Puede colocar todo eso en un solo archivo html y usar una etiqueta de enlace:
<link rel="import" href="js-loader.html">En 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>Así es como se hace en la empresa en la que trabajo, además parece un poco más legible (aunque esa es nuestra opinión).
Si le preocupa el rendimiento, es posible que desee crear un único archivo JavaScript utilizando una utilidad como Gulp. Esto también manejará la minificación por ti.
Aquí hay una guía de configuración fácil.
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')) });Luego ejecute este comando.
gulp scriptsFinalmente, incluye esto en tu HTML.
<script src="dist/all.js"></script>Si realmente desea cargarlos dinámicamente, aquí hay un script escrito por el usuario 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...'); });La siguiente función hace el truco para mí. Vincula los archivos second.js y third.js al documento. index.js es:
// 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); } }()); Y el index.html es:
// index.html <!doctype html> <html> <head> </head> <body> <script src="index.js"></script> </body> </html>