使用 easeljs 时未定义 init() 函数

Question

我正在做一个小项目，使用 easeljs 和 jQuery 创建一个图片库，我对这两种工具都很陌生，这个特殊问题让我摸不着头脑。

我的 HTML 非常基础，我只想在开始添加任何附加功能之前获得正确的功能：

<body onload="init();">
  <div style="margin-top:20px;" class="col-sm-8">
     <div class="embed-responsive embed-responsive-4by3">
        <canvas class="embed-responsive-item" id="slide-show" width="640" height="480"></canvas>
     </div>
  </div>
</body>

如果我理解正确，为了设置一个新的阶段并使整个脚本基本上运行，我需要在脚本的开头运行一个 init() 函数。

$(document).ready(function(){
  //declare global variables
    var data;
    var stage;
    var canvas;
    var images = [];
    var bitmaps = [];
    var imageCount = 0;
    var slideshowInterval = 3000;

    //connect to feed.json
    $.ajax({
        url: 'json/feed.json',
        datatype: 'json',
        type: 'get',
        cache: false,
        success: function(data) {
          data = data;
        }
    });

    function init(){

      canvas = document.getElementById('slide-show');
      stage = new createjs.Stage(canvas);

      $(data.feed).each(function(index, value) {
          //populate the images array with content from feed.json
          images[index] = new Image();
          images[index].src = data.feed[index].source;
          images[index].onload = imageLoaded;
      });
    }

    function imageLoaded(){
      // go through all images and create bitmaps for them.
      imageCount++;
      if(imageCount >= images.length - 1){
        createBitmaps();
      }
    }

    function createBitmaps(){
      // create the bitmaps and add them to an array
      $(images).each(function(index, value){
        bitmaps[index] = new createjs.Bitmap(images[index]);
      });
    }

    function createSlider(){

      bitmaps.x = 0;
      bitmaps.y = 0;
      stage.addChild(bitmaps);

      setTimeout(slideshowInterval, slideImage(index));
    }

    function slideImage(index){

      // handle the animation of the slide effect and update dom with image details.
      $('#biscuit-name').html(data.feed[index].name);
      $('#biscuit-info').html(data.feed[index].text);
    }
});

还请注意，这当然还没有完成，有些功能只完成了一半。我只是想在处理事情时进行一些调试，但在第一步时遇到了困难，init 函数似乎没有按预期触发。

Answer 1

主要问题是<body onload="someFunction()">会在全局范围内寻找someFunction定义，即执行window.someFunction().

现在，您 init() 不在全局范围内。它仅存在于 $(document).ready(function(){ ... }) 函数中。

因此，一种解决方案是将 init 函数添加到全局范围，如下所示：

$(document).ready(function() {
     // ... all your current definitions
     window.init = init;
});

这里要注意，init只有在$(document).ready jQuery事件触发后才会被定义添加到window中。但这应该不是问题，因为 $(document).ready 通常比 onload 事件更早[1] 触发，因此在 <body onload="init()"> 调用之前定义了 init。

_{[1] $(document).ready 在 HTML 文档加载后触发。 onload 是内置的 DOM 事件，在所有 content（包括图片等）加载完成后触发。}

使用 easeljs 时未定义 init() 函数

init() function undefined when using easeljs

javascript

jquery

jquery-events

easeljs