如何在iframe加载网站时显示加载gif？

在iframe加载网站时显示加载gif，可以通过以下方法实现：

使用CSS和JavaScript控制加载动画的显示和隐藏。

首先，在HTML中添加一个包含加载动画的div元素，并将其设置为透明背景和绝对定位。然后，在iframe元素的上方添加一个遮罩层，以便在加载时遮盖iframe。

<!DOCTYPE html>
<html>
<head><style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.iframe-container {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 999;
}
</style>
</head>
<body>

<div class="iframe-container">
 <iframe src="https://example.com" onload="hideLoader()"></iframe>
  <div class="overlay"></div>
  <div class="loader">
    <img src="loading.gif" alt="Loading...">
  </div>
</div><script>
function hideLoader() {
  document.querySelector('.loader').style.display = 'none';
  document.querySelector('.overlay').style.display = 'none';
}
</script>

</body>
</html>

使用CSS和JavaScript控制加载动画的显示和隐藏，并在加载完成后自动隐藏加载动画。

在上述代码的基础上，可以使用JavaScript监听iframe的加载事件，并在加载完成后自动隐藏加载动画。

document.querySelector('iframe').addEventListener('load', function() {
  document.querySelector('.loader').style.display = 'none';
  document.querySelector('.overlay').style.display = 'none';
});

通过以上方法，可以在iframe加载网站时显示加载gif，并在加载完成后自动隐藏加载动画。