画布的 GWT 图像加载（onLoad）

Question

不使用任何图像加载库，我正在加载和处理如下图像：

ImageGenerator(){
  for(int i=0;i<100;i++){
      ImageProcess( data-i , i );
  }
}

ImageProcess( String data , int i ){
  final Image img = new Image(data);
  img.setVisible(false);
  RootPanel.get().add(img);
  GWT.log( "image " + i );
  img.addLoadHandler(new LoadHandler() {
      @Override
      public void onLoad(LoadEvent event) {
          GWT.log( "onload " + i + " " + img.getWidth() );
          ImageElement data = ImageElement.as(img.getElement());
          RootPanel.get().remove(img);
          obj.setData(data);
          ..obj processing
      }
  });
}

结果：

image 1;
image 2;
image 3;
..
image 98;
image 99; <-- finish for loop
onload 1; <-- start loading image
onload 2;
onload 3;
..
onload 98;
onload 99;

但我希望它看起来像：

image 1;  <-- generate image and load image step by step
onload 1;
image 2;
onload 2;
image 3;
onload 3;
..
image 98;
onload 98;
image 99;
onload 99;

我知道在我为 img.src 分配了一个值之后，图像不会立即可用。它必须先加载。图像加载完成后，img 元素将触发 onload 事件。我尝试添加计时器并将图像放入不同的 DOM 元素。它不起作用。

我的问题是，如何触发图像元素立即加载？还是让 ImageProcess 等到 onload 完成？

Answer 1

 RootPanel.get().add(img);

使用此行可以强制直接加载图像。 我认为您的问题是，循环甚至在从服务器传输一个图像之前就完成了 - 因此您首先看到图像输出，然后是 onload 输出。

现在我不确定为什么添加图像、执行其加载、添加下一个图像等等对您来说如此重要......

但我确信这可以通过编写一个将图像添加到 DOM 的方法轻松实现，然后在其 onload 处理程序中为下一个图像再次调用该方法。依此类推，直到达到停止标准。

问候 斯蒂芬