在 iOS 上使用 Chrome 不会触发图像 onLoad 事件答案

【问题标题】：Image onLoad event is not triggered using Chrome on iOS在 iOS 上使用 Chrome 不会触发图像 onLoad 事件
【发布时间】：2020-03-18 15:27:12
【问题描述】：

我正在使用 Scala.js 和 d3.js (scala-js-d3) 在 Web 应用程序中绘制 SVG。我遇到的问题是，对于我的背景图像，在 iOS (iPhone) 上使用 Chrome 时不会触发 load 事件。在 Windows 上使用 Chrome 时会触发。图片本身在所有平台上都可见。

这是我添加图像的方法：

d3.select("#backgroundImg")
  .append("image")
  .attr("id", "graphBackgroundImage")
  .attr("width", "1954px")
  .attr("height", "1532px")
  .attr("xlink:href", "img/maps/map.png")
  // TODO this load event does not trigger on iOS!
  .on("load", (_: EventTarget) => { println("image loaded") } : Unit)
  .on("error", (_: EventTarget) => { prinltn("an error has occured") } : Unit)

在 Windows 上，这会创建以下 svg dom 元素（并且一切都按预期工作）：

<g id="backgroundImg">
  <image id="graphBackgroundImage" width="1954px" height="1532px" xlink:href="img/maps/map.png"></image>
</g>

在我的 iPhone 上调试有点困难，所以到目前为止我发现的就是这些。我只知道在 iOS 上使用 Chrome 时没有记录 image loaded（也没有 an error has occured 日志）。

【问题讨论】：

有没有可以测试一些解决方案的游乐场？
如果你想花点钱，还有 Browserstack，它有很多手机设备可供选择:) browserstack.com 可能还有一些免费的替代品，试试看这里：@ 987654325@
您尝试过使用 on("onload") 吗？我要求尝试这个的原因是 iOS 中的 chrome 几乎是基于 webkit 而不是眨眼。所以iOS和windows上的Chrome会有差异

标签： javascript html ios css d3.js

【解决方案1】：

关于这个有一个类似的主题（减去 scala JS），这里是链接：Topic One

这是另一个可能有帮助的： Topic Two

解决方案最终是他们有“css-properties 指定'指针事件'”

您能否发送您的网址以供审核。如果这两个链接都没有帮助，我想我可能会有另一个想法，但我需要查看更多代码。

【讨论】：

感谢您的输入，但不幸的是，这两个链接都没有显示类似的场景，因为我既没有指针事件的问题（其中一个 css 设置是罪魁祸首），我的页面也没有呈现正确。另外，我正在开发的代码库不是开源的，也没有托管在公共网站上，所以很难提供网址。
明白，抱歉，我帮不上忙。我会环顾四周，看看是否还有其他我能找到的可能有帮助的东西。祝你好运，我相信其中一位代码大师会帮助你。
@FlorianBaierl 我知道将私人链接分享出去是不行的。但是您仍然可以选择构建一个简单的演示来重现此问题，然后其他想要帮助的人可以深入研究并找出根本原因。为什么不试一试呢？