Question

好吧我正在使用EaselJS处理webapp，在我清除缓存后第一次加载时，我的图像在默认大小的左上角加载（基本上是x：0，y：0，比例：1而不是我指定的。我知道这是一个异步图像加载错误，但我使用image.onload调用执行所有实际绘图的函数，这似乎根本不会影响任何事情。

这是相关代码。我还做了一个显示缓存问题的小提琴，但由于跨域图像，应用程序的实际功能不起作用。 https://jsfiddle.net/a9m66tcL/2/

    function initToolbar(stage){
      let toolbarImages = [];
      let toolbar = new createjs.Shape();
      toolbar.graphics.beginFill("black");
      toolbar.graphics.drawRect(0, 580, 960, 120);
      toolbarContainer.addChild(toolbar);

      // load the source images:
      for (name of imageManifest){
        let image = new Image();
        image.src = "SacredSpace/"+ name +".png";
        image.onload = loadToolbarImage(toolbarImages, image);
      }
      stage.addChild(toolbarContainer);
    }

    function loadToolbarImage(toolbarImages, image) {
      toolbarImages.push(image);
      let bitmap = new createjs.Bitmap(image);
      toolbarContainer.addChild(bitmap);
      bitmap.x = toolbarImages.length * 150 + 100;
      bitmap.y = 640;
      bitmap.regX = bitmap.image.width / 2 | 0;
      bitmap.regY = bitmap.image.height / 2 | 0;
      if (image.width > image.height){
        bitmap.scaleX = bitmap.scaleY = 100/ image.width
      }else{
        bitmap.scaleX = bitmap.scaleY = 100/ image.height
      }
      bitmap.on("mousedown", function (evt) {
        addObject(image)
        update = true;
      });
    }

Answer 1

这是不正确的：

image.onload = loadToolbarImage(toolbarImages, image);

不是触发onload，而是立即调用它，结果作为onload处理程序返回。正确的语法是：

image.onload = loadToolbarImage; // Pass the function by reference

由于看起来您使用的是ES6，请使用：

image.onload = e => loadToolbarImage(toolbarImages, e);

要在ES5中传递参数，您可以执行以下操作：

image.onload = loadToolbarImage.bind(this, toolbarImages, image);

我还建议将toolbarImages移到init函数之外，以便可以访问它，并使用图像的事件目标。这样您就不会尝试手动传播图像和数组。

干杯，

HTML5图像在第一次加载时加载不正确，即使使用image.onload也是如此

1 个答案: