重新加载页面时，加载事件不会在Safari上触发

问题描述

我在一个对象标签内加载了一个简单的SVG，就像下面的代码一样。在Safari上，当我在打开浏览器后第一次加载页面时， load 事件只会触发一次。所有其他时间它没有。我使用 load 事件用GSAP初始化一些动画，所以我需要知道什么时候SVG被完全加载，然后才能够选择DOM节点。似乎可行的快速解决方法是使用 setTimeout 而不是附加到事件上，但似乎有些不方便，因为较慢的网络无法加载 object 在指定的时间内。我知道这个事件并不是真正的标准化，但我不认为我是第一个遇到这个问题的人。如何解决它？

I have a simple SVG loaded inside a object tag like the code below. On Safari, the load event is fired just once, when I load the first time the page after opening the browser. All the other times it doesn't. I'm using the load event to initialize some animations with GSAP, so I need to know when the SVG is fully loaded before being able to select the DOM nodes. A quick workaround that seems to work is by using setTimeout instead of attaching to the event, but it seems a bit akward as slower networks could not have load the object in the specified amount of time. I know this event is not really standardized, but I don't think I'm the first person that faced this problem. How would you solve it?

var myElement = document.getElementById('my-element').getElementsByTagName('object')[0];

myElement.addEventListener('load', function () {
    var svgDocument = this.contentDocument;
    var myNode = svgDocument.getElementById('my-node');

    ...
}

推荐答案

听起来更像是当数据缓存时，load事件在之前触发，您附加了处理程序。

It sounds more like the problem is that, when the data is cached, the load event fires before you attached the handler.

你可以尝试的是一旦你附加事件重置数据属性：

What you can try is to reset the data attribute once you attached the event :

object.addEventListener('load', onload_handler);
// reset the data attribte so the load event fires again if it was cached
object.data = object.data;

这篇关于重新加载页面时，加载事件不会在Safari上触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！