在iOS上使用Chrome浏览器时，图片的onLoad事件未被触发

Question

我正在使用 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 occurred日志）。

- Florian Baierl

---

有没有一个可以测试一些解决方案的游乐场？ - C.OG

如果你愿意花一点钱，可以试试Browserstack，它有很多不同的手机设备可供选择 :) https://www.browserstack.com/也许还有一些免费的替代方案，可以在这里看看： https://alternativeto.net/software/browserstack/?license=free - Timm Jensen

你尝试使用on("onload")了吗？我之所以建议你尝试这个方法，是因为iOS上的Chrome基本上是基于WebKit而不是Blink。因此，在iOS和Windows上的Chrome中会存在差异。 - karthick

Answer 1

这个问题有一个类似的话题（不包括scala JS），这是链接：话题一

这里还有另一个可能有用的话题：话题二

解决方案最终是他们有“指定'指针事件'的CSS属性”

你能发一下你的URL以供审查吗？如果这两个链接都没有帮助，我可能会有另一个想法，但我需要看更多的代码。

- Nikimaria87

---

感谢您的回复，但很遗憾，这两个链接都没有展示类似的情况，因为我既没有指针事件的问题（其中CSS设置是罪魁祸首），也没有页面无法正确渲染的问题。此外，我正在处理的代码库不是开源的，也没有托管在公共网站上，所以很难提供URL。 - Florian Baierl

明白了，很抱歉我不能提供更多帮助。我会再找找看是否有其他可以帮到你的东西。祝你好运，肯定会有这些代码大师能够帮忙的。 - Nikimaria87

@FlorianBaierl 我了解分享私人链接是不允许的。但您仍然可以选择构建一个简单的演示，以重现此问题，然后其他想要帮助的人可以深入研究并找出根本原因。为什么不试试呢？ - Pengson