1

我正在使用这个 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)
}
4

1 回答 1

0

我认为您的问题是您的 Javascript 已加载到 <head> 标记中，这意味着 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 的 ready() 函数，我会首先尝试它。

希望这可以帮助！

于 2013-06-05T17:53:46.440 回答