ブラウザ更新時の読み込みシームレス化を実現したいです

以下で過去に質問させていただいた、ブラウザ更新時の画像読み込みシームレス化のブラウザページ全体版を実現したいと思っています。
https://teratail.com/questions/271650

上の過去の質問回答の構文では画像URLを指定していますが、画像URLではなくWEBページ全体を表示させる場合に更新時のラグ（ページが完全に表示されるまでの読み込み中の状態）をなくしシームレスに表示が切り替わるようにしたいと思っています。

現在の構文及びサンプルページは以下になりますが、一番上の既存の質問の回答を活用してもいいですし、以下の構文を修正して実現する方法でもいいのですが、教えていただけると助かります！
ちなみに＜サンプルページ＞を見ていただくとわかるのですが、ＷＥＢページの読み込み以外に、サイト側の「読み込み中・・・」の表示も出ないようにしたいと思っています。

ずっと悩み続けているので、この機会に改善したいと思っています。
どうぞよろしくお願い致します。

＜構文＞


<!doctype html>
<style type="text/css">
<!--
#center{
background-color: transparent;
margin-top:-260px;
margin-left:-70px;
}
-->
</style>
<html>
<body>
<div style="background: url(no_tsunami1.png) no-repeat 0% 0%">
</div>
<iframe sandbox="allow-scripts" width="1000" height="1000" src="https://www.jma.go.jp/jp/tsunami/" scrolling="no" id="center"></iframe>
<script type="text/javascript">
setTimeout("location.reload(false)",15000);
</script>
</body>
</html>