Question

我正在尝试使用wavesurfer.js，目前有以下内容：

   'use strict'
    <!-- wavesurfer.js -->
    <script src="src/wavesurfer.js"></script>
    <script src="src/util.js"></script>
    <script src="src/webaudio.js"></script>
    <script src="src/mediaelement.js"></script>
    <script src="src/drawer.js"></script>
    <script src="src/drawer.canvas.js"></script>
    <script src="./plugin/wavesurfer.regions.js"></script>
    var wavesurfer = Object.create(WaveSurfer);

这很好。

我需要将所有这些合并为一个，并使用类似的东西：

<script src="myWavesurfer.js"></script>
var wavesurfer = Object.create(WaveSurfer);

我尝试了以下内容：

var jScripts2Call =
[ '/src/wavesurfer.js',
  '/src/util.js',
  '/src/webaudio.js',
  '/src/mediaelement.js',
  '/src/drawer.js',
  '/src/drawer.canvas.js',
  '/plugin/wavesurfer.regions.js'];
// load all the jScripts
for ( var i=0; i < jScripts2Call.length; i++ )  {
    var script    = document.createElement('script');
    script.src    = jScripts2Call[i];
    script.type   = 'text/javascript';
    script.async  = false;
    var scripts = document.getElementsByTagName('script')[0];
    scripts.parentNode.insertBefore(script, scripts);
};
var wavesurfer = Object.create(WaveSurfer);

但是这些脚本不会执行＆＃34;在我之前调用Object.create（WaveSurfer）之前。我尝试过使用jquery：

$( document ).ready( function() {
  var wavesurfer = Object.create(WaveSurfer);
})

我也尝试了jQuery（点）getScript（），它似乎只加载了第一个脚本。我使用jQuery（dot）ajax（）运气好一点，但在Object.create（WaveSurfer）调用之前我再也无法加载和执行脚本。

似乎gulp-concat可能是要走的路，但我希望能有更简单的事情。

一如既往，非常感谢任何和所有的帮助。想法？

Answer 1

您需要使用load事件而不是ready事件。当所有html标签本身已完成加载时，就会触发就绪，而不是在其他文件完成时触发。使用jquery，你可以这样做：

$( window ).load( function() {
  var wavesurfer = Object.create(WaveSurfer);
})

或使用常规js（因为你真的不需要jquery）：

window.onload = function() {
  var wavesurfer = Object.create(WaveSurfer);
}

将javascript脚本标记合并为一个

1 个答案: