我如何运行淡出我的加载div后，主div已加载？

<div id="loadingDiv">Loading...</div>
<div id="mainDiv">Content</div>

#loadingDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: #ccc;
  opacity: 1;
  transition: opacity 0.5s;
}

#mainDiv {
  opacity: 0;
  transition: opacity 0.5s;
}

window.addEventListener('load', function() {
  var loadingDiv = document.getElementById('loadingDiv');
  var mainDiv = document.getElementById('mainDiv');

  setTimeout(function() {
    loadingDiv.style.opacity = 0;
    mainDiv.style.opacity = 1;
  }, 2000); // 延迟2秒后隐藏加载div并显示主div
});