gpt4 book ai didi

javascript - DOM 渲染上有事件吗?

转载 作者:行者123 更新时间:2023-11-28 09:06:47 27 4
gpt4 key购买 nike

我正在使用这个 javascript 库 jQuery SVG在 html 页面中操作外部 svg。 SVG 渲染速度非常慢。

当 svg 文件非常重时,我看不到第一个动画,因为它是在渲染之前开始的。动画在加载事件时开始,但页面尚未呈现,因此我看到动画结束。有没有办法在 JavaScript 中捕获渲染事件?

// load svg
$('#slide').svg({});
var svg = $('#slide').svg('get');
svg.load('slide.svg', {
addTo: false,
changeSize: false,
onLoad: onLoad
});
// animation start when dom is ready not when page is render
function onLoad(){
$('#maskRight').animate({svgWidth: '200'}, 1500)
}

最佳答案

我认为你的问题是你的Javascript加载在标签中,这意味着Javascript可能在正文加载之前开始运行。我推荐以下两个选项之一:

jQuery 的 $(document).ready(handler)

http://api.jquery.com/ready/

或者您也许也可以通过将上面的代码挂接到主体的 onLoad 事件中来完成此操作,如下所示:

<body onload="loadSVG">
<stuff />
</body>
<script>
function loadSVG(){
$('#slide').svg({});
var svg = $('#slide').svg('get');
svg.load('slide.svg', {
addTo: false,
changeSize: false,
onLoad: onLoad
});
}
function onLoad(){
$('#maskRight').animate({svgWidth: '200'}, 1500)
}
</script>

我还没有测试过这段代码,但如果我遇到这个问题并且由于某种原因不想使用 jQuery 的 read() 函数,那么这是我首先要尝试的事情。

希望这有帮助!

关于javascript - DOM 渲染上有事件吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16946087/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com