如何仅当Bootstrap动态标签内容处于活动状态时才加载它？

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
  点击展开内容
</button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    这是动态加载的内容
  </div>
</div>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
  点击展开内容
</button>
<div class="collapse" id="collapseExample" data-parent="#accordion" onload="loadContent()">
  <div class="card card-body">
    这是动态加载的内容
  </div>
</div>

<script>
  function loadContent() {
    $('#collapseExample').on('shown.bs.collapse', function () {
      // 在此处加载内容的代码
      console.log('内容加载完成');
    });
  }
</script>