重新加载页面时未在 Safari 上触发加载事件 [英] Load event not fired on Safari when reloading page

问题描述

我在 object 标签中加载了一个简单的 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');

    ...
}

推荐答案

这听起来更像是问题在于，当数据被缓存时，加载事件在您附加处理程序之前触发.

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 上触发加载事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！