如何使用 Ionic 3 在 Android 上为 Image() 触发 onload 事件

Question

我正在尝试使用 Ionic 3 在 Android 上触发 Image() (HTMLImageElement) 的“onload”事件的函数。它适用于 iOS，但不幸的是不适用于 Android。

如何在 Android 上触发onload功能？ 我不将它与<img>或其他标签一起使用，所以我不能用<img (load)="functionHere()">触发它。

（我在 Stack Overflow 上看到了其他一些“onload”问题，这是关于 Android/Ionic 3 的特定情况）。

这是我的示例代码：

this.backgroundImageSource = new Image();
this.backgroundImageSource.src = this.image;


this.backgroundImageSource.onload = function() {
    // THIS PART DOESNT FIRE ON ANDROID
    console.log("ONLOAD TRIGGERED");
}

Answer 1

如果示例代码完全按照所示使用，那么问题可能在于在事件发生后定义了onload事件处理程序。 您应该在事件发生之前定义事件处理函数。

所以必须在设置src属性之前处理onload 。 虽然，我不确定 JS 引擎是否在任何优化步骤中修复了这个问题。

this.backgroundImageSource = new Image();

//This has to be done before setting src
this.backgroundImageSource.onload = function() {
    console.log("ONLOAD TRIGGERED");
}

this.backgroundImageSource.src = this.image;

Answer 2

我有同样的问题。

我发现 base64 不包含标题/描述符，因此它没有触发。

我通过在不存在标题的情况下附加标题来解决此问题：

if (!base64Data.includes(',')) {
  // Detect if base64 image is missing header/descriptor
  console.log("Prepending descriptor to Base64 image string")
  base64Data = `data:image/jpeg;base64,${base64Data}`;
}

（逗号用于将标题与正文分开）。