HTML5 即使 image.onload 图像在第一次加载时加载不正确

Question

好吧，我正在使用 EaselJS 开发一个网络应用程序，在我清除缓存后第一次加载时，我的图像以默认大小加载到左上角（基本上是 x:0,y:0,scale :1) 而不是我指定的。我知道这是一个异步图像加载错误，但我使用 image.onload 调用了执行所有实际绘图的函数，这似乎根本没有影响任何东西。

这是相关代码。我还制作了一个显示缓存问题的 fiddle，但由于跨域图像，应用程序的实际功能无法正常工作。 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 图像在第一次加载时加载不正确

HTML5 images loading improperly on first load even with image.onload

html

caching

onload

easeljs