iframeを読み込むまでローディング画面を表示したい

Question

iframeを読み込むまでの間にローディングのアニメーションを表示したいです。
現状のコードだと、ローディングが消えずに表示され続けてしまいます。
ページの読み込み完了したのを認識できていないのかな？と思うのですが、
解決方法がわかりません。

下記、現状のコードです。
どうぞよろしくお願いいたします。

<div class="loading">
  <img src="img/loading.gif" />
</div>
<iframe src="https://www.google.co.jp/"	width="100%" height="100vh" frameborder="0" marginheight="0" marginwidth="0"></iframe>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

.loading {
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,1.0);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20000;
}

.loading img {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -20px;
	margin-left: -20px;
}

window.onload = function() {
  const spinner = document.getElementById('loading');
 
  // Add .loaded to .loading
  spinner.classList.add('loaded');
}

Answer 1

googleはiframeで呼び出せないのでは？

Comments

[yambejp]

CORSがクリアなサイトであればこんな感じで
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('iframe').addEventListener('load',()=>{
console.log('loaded');
});

});

</script>
<iframe src="hogehoge.php"></iframe>

[treevillage]

すみません。googleはダミーでした。試しに、https://teratail.com/のURLをiframeで読み込んで確認しましたが、loadingが消えませんでした…。

<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('iframe').addEventListener('load',()=>{
console.log('loaded');
});

});
</script>

scriptは上記のみを記述するで認識あっていますでしょうか？
お手数ですがよろしくお願いします。