JQuery prepend 需要一秒钟才能在页面加载时输入 div

Question

我有一个列表导航，我希望它位于我已经实现的网页上的另一个 div 中（特别是在列中）。问题是在页面加载时（瞬间），它会在 JQuery 脚本执行到所需位置之前出现在实际位置上。如何停止页面加载时的瞬间跳转？

<div id="target">
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</div>

$( document ).ready(function(){
$('#destination').prepend( $('#target') );
});

Answer 1

如果您开始隐藏元素，并且仅在将其移动到新目的地时显示它，它将避免您看到的一些闪烁

$( document ).ready(function(){
    $('#destination').prepend( $('#target').show() );
});

#destination {
  background-color:blue
}
#target {
  display:none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="target">
<ul>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ul>
</div>

<div id="destination"></div>