ブラウザ更新時の画像読み込みシームレス化(以下のブラウザページ）のページ全体版を実現したいと思っています。  
<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>
    
```

＜サンプルページ＞  
<http://blngs.net/tsunami_kisyoucyou.htm>
CC BY-SA 4.0
2021-03-11T22:11:16.047
74602
2021-03-12T01:48:28.477
44293
question
html css
ブラウザ更新時の読み込みシームレス化を実現したいです