iframeでモーダル表示時の遅延を解消！初期表示を速くする最適な方法と実装例｜DAD UNION

Web開発を行う中で、iframeを使用したコンテンツの埋め込みは多くの場面で利用されています。しかし、iframeの利用方法を誤ると、ページの表示速度が遅くなり、ユーザー体験を損なう原因となります。
本記事では、iframeを使ったモーダル表示において、遅延を最小限に抑える方法を解説します。初心者にもわかりやすい記述例を提供し、具体的な実装方法を丁寧に説明します。

Contents

iframeとは
iframeは遅延の原因か？なぜ？
iframeを使って遅延させずモーダル表示させる場合の解消方法と記述例
- 実装例
iframeのsrcをデフォルトで読み込まず、モーダルボタンのクリック時に動的に設定するデモページ
注意点
まとめ

iframeとは

iframe（インラインフレーム）は、HTML要素の一つで、あるWebページ内に別のWebページを埋め込むために使用されます。例えば、YouTube動画の埋め込みや、外部の地図サービスの表示など、外部リソースを組み込む際に非常に便利です。

基本的なiframeの記述例は以下の通りです：

<iframe src="https://dad-union.com" width="600" height="400"></iframe>

このように、iframeを使うことで簡単に外部コンテンツをページ内に表示できます。

iframeは遅延の原因か？なぜ？

iframeの利用がページの遅延を引き起こす理由には、主に以下の点が挙げられます：

外部リソースの読み込み時間：
iframe内のコンテンツは親ページとは別にHTTPリクエストを行うため、追加の読み込み時間が発生します。
非同期処理がされていない：
iframeはデフォルトで同期的に読み込まれるため、他のリソースの読み込みをブロックする可能性があります。
レンダリング負荷：
iframe内で大量のJavaScriptやCSSが実行される場合、レンダリングの負荷が増大します。

特に初期表示時にiframeを直接読み込む場合、表示速度の低下が顕著です。そのため、iframeを使用する際には慎重な設計が必要です。

iframeを使って遅延させずモーダル表示させる場合の解消方法と記述例

iframeをモーダル内で使用する際、初期表示時にiframeのリソースを読み込まず、必要なタイミングで動的に読み込むことで、表示速度の低下を防ぐことができます。
以下にその解消方法を説明します。

実装例

以下は、HTML、CSS、JavaScriptのみを使用したiframeモーダル表示のコードです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>iframeのsrcをデフォルトで読み込まず、モーダルボタンのクリック時に動的に設定するデモページ</title>

<meta name="description" content="iframeのsrcをデフォルトで読み込まず、モーダルボタンのクリック時に動的に設定するデモページ">

<style>
body{
    text-align: center;
    font-size: 16px
}
h1{
    text-align: center;
    font-size: 20px;
    padding: 20px 0;
    line-height: 1.4em;
}
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}
.modal-content {
    width: 80%;
    max-width: 900px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}
iframe {
    width: 100%;
    height: 500px;
    border: none;
}
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
</style>
</head>
<body>

<h1>iframeのsrcをデフォルトで読み込まず、モーダルボタンのクリック時に動的に設定してます。<br>「モーダル表示」をクリックしてみてください。</h1>

<button id="openModal">モーダル表示</button>
<div class="modal-overlay" id="modal">
    <div class="modal-content">
        <iframe id="iframe" src=""></iframe>
        <button class="close-btn" id="closeModal">閉じる</button>
    </div>
</div>


<script>
const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');
const iframe = document.getElementById('iframe');

openBtn.addEventListener('click', () => {
    iframe.src = 'https://dad-union.com';
    modal.style.display = 'flex';
});

closeBtn.addEventListener('click', () => {
    iframe.src = '';
    modal.style.display = 'none';
});
</script>


</body>
</html>

このコードでは、iframeの読み込みをボタンのクリックイベントで動的に行い、表示されるまでの遅延を最小化しています。