DOM渲染上是否有事件?

时间:2013-06-05 17:19:02

标签: javascript svg

我正在使用此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)
}

1 个答案:

答案 0 :(得分:0)

我认为您的问题是您的Javascript已加载到< head> tag,这意味着Javascript可能在正文加载之前开始运行。我建议使用以下两个选项之一:

jQuery的$(文档).ready(处理程序)

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()函数,那么我会尝试第一件事。

希望这有帮助!