在DOM渲染上是否有一个事件

Is there an event on DOM render?

本文关键字：是否 有一个 事件 DOM      更新时间：2023-09-26

我使用这个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的$(文档)时(处理器)

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()函数，我将首先尝试它。

希望这对你有帮助!

相关文章：