javascript - Onload-Event 在 Android 上不会停止

Question

我的 androids(我的设备有 4.1.2) native 浏览器和 androids chrome 有问题。我使用 SVG 和 onload 事件构建了一个 HTML5 Web 应用程序。我像这样包含了 SVG(并由 W3C 推荐)

<object id="svgContent" data="file.svg" onload="MyMethod();">
    Your browser did not support SVG
</object>

我的 JS 函数如下所示

function MyMethod() {
    $('#svgContent').attr('style', 'display:none;');
    var iIntervalID = window.setInterval(function(){
        $('#svgContent').attr('style', 'display:block;');
        clearInterval(iIntervalID);
    }, 100);
}

我的问题是，onload 事件是由显示样式属性的修改触发的，因此它是一个调用循环(事件始终触发)。桌面版的 Chrome 和 Firefox 没有这种奇怪的行为。有人知道如何解决这个问题吗？

对于那些会问的人，我想在加载后重新显示 SVG，将 svg 重新缩放到容器的全宽。默认情况下，svg具有自己的viewbox的大小，并且100％的宽度和高度不起作用(只有绝对值起作用，但这不是响应式设计)。隐藏和显示可以在桌面浏览器上修复此问题，但会在 Android 上导致上述问题。也许，您还有其他想法，如何在没有我的“黑客”的情况下将 SVG 变为全宽。

Answer 1

您是否尝试过调用 clearInterval设置前display:block ？在移动设备上重新绘制 svg 需要一些时间可能并非不可能，而且完全有可能，因为您使用 setInterval该回调将在 display:block 之前再次被调用更新完成。

您还可以使用setTimeout ，不会每 X 毫秒重复调用一次。

您还应该注意更改 width , height或display这样通常会导致页面回流，这会稍微损害移动设备上的性能。