DOM呈现中是否存在事件？

我正在使用此JavaScript库jQuery SVG来操纵HTML页面中的外部svg。 SVG呈现速度很慢。DOM呈现中是否存在事件？

当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) 
}

来源

2013-06-05 mrpazzo

['requestAnimationFrame']（https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame） – zzzzBov

@zzzzBov +1，这是一个很大的区别。值得一提的是jQuery已经在内部使用动画。 –

@BenjaminGruenbaum他们只做了很短的时间（约1.6版） – Prinzhorn

我觉得这里的问题是，你的JavaScript是在<头>标签，这意味着可能的Javascript开始身体负荷运行前加载。我建议以下两种方法之一：

jQuery的$（文件）。就绪（处理）

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的ready（）函数一些原因。

希望这会有所帮助！

来源

2013-06-05 17:53:46 JessieArr

我已经把代码放在jquery ready（）函数:(我的问题是load事件不是sincronyze与渲染事件 – mrpazzo

DOM呈现中是否存在事件？

回答

相关问题