この記事は、Google スプレッドシートを Web ページに埋め込むときにデータの読み込みが遅いために発生する白い畫面の問題を解決することを目的としています。 JavaScript の「iframe.onload」イベント リスニング メカニズムを使用して、テーブル コンテンツが読み込まれる前に動(dòng)的読み込みインジケーター (スピナー) を表示する方法を紹介します。これにより、ユーザー エクスペリエンスが大幅に向上し、空白の長い待機(jī)が回避され、ページ コンテンツの読み込みプロセスがよりフレンドリーで直観的になります。

問題分析

Web ページに

解決策: iframe.onload イベントを利用する

「白い畫面」問題を解決する核心は、

私たちの戦略は次のとおりです。

1. 読み込みインジケーター (スピナー) を
2. デフォルトでは、読み込みインジケーターが表示されます。
4. 読み込みインジケーターが表示される前に

実裝手順

以下では、HTML、CSS、JavaScript を使用してこの機(jī)能を詳細(xì)に実裝します。

1. HTML構(gòu)造の準(zhǔn)備

まず、

 <div id="spreadsheet-container" style="位置: 相対; 幅: 360px; 高さ: 1000px; マージン: 自動(dòng);">
    <!-- インジケーター要素を読み込み中 -->
    <div id="loading-spinner"></div>

    <!-- 埋め込み Google スプレッドシート iframe -->
    <iframe id="google-spreadsheet-iframe" src="'https://docs.google.com/spreadsheets/d/e/2PACX-1vQyRGpXqAZ15m-WEyI6mbCIVZrWssE" zces8niu7h0ndwelvvg7hdh4gobj7hulmwqxhddp8ft9uqspe>
    </iframe>
</div>

例証します:

• #spreadsheet-container 親コンテナとして、子要素の絶対位置を指定するためにposition:relativeを設(shè)定します。
• #loading-spinner は読み込みインジケーターであり、最初に表示されます。
• #google-spreadsheet-iframe は、Google シートを埋め込む

2.CSSスタイル定義

インジケーターとアニメーションを読み込むためのスタイルを定義します。ここでは、単純な回転リングのアニメーションを作成します。

 
/* インジケーターのスタイルを読み込み中*/
#ローディングスピナー {
    位置: 絶対;
    トップ: 50%;
    左: 50%。
    変換: 変換(-50%, -50%); /* 中心*/
    z インデックス: 10; /* iframe の上にあることを確認(rèn)してください*/
    幅: 50ピクセル;
    高さ: 50ピクセル;
    境界線: 5 ピクセルの実線 #f3f3f3; /* 明るい背景*/
    ボーダートップ: 5px ソリッド #3498db; /* 青色の回転部分*/
    境界半徑: 50%; /* 丸*/
    アニメーション: スピン 1 秒のリニア無限。 /* 回転アニメーション*/
    ディスプレイ: フレックス; /* スピナー內(nèi)にテキストまたはアイコンがある場合は、フレックスボックスを使用して內(nèi)部コンテンツを中央に配置します*/
    整列項(xiàng)目: 中央;
    コンテンツの位置揃え: 中央;
}

/* 回転アニメーションのキーフレーム*/
@keyframes スピン {
    0% { 変換: 変換(-50%, -50%) 回転(0度); }
    100% { 変換: 変換(-50%, -50%) 回転(360度); }
}
スタイル>

例証します:

• #loading-spinner は、絶対位置決めと変換を通じて正確なセンタリングを?qū)g現(xiàn)します。
• z-index: 10
• border と border-top を border-radius と組み合わせると、50% でリングが作成されます。
• @keyframes スピンは、0 度から 360 度までの回転アニメーションを定義します。

3. JavaScript ロジック

最後に、読み込みインジケーターの表示と非表示を制御する JavaScript コードを作成します。

 
document.addEventListener("DOMContentLoaded", function() {
    const iframe = document.getElementById("google-spreadsheet-iframe");
    const スピナー = document.getElementById("loading-spinner");

    // DOM 要素が存在することを確認(rèn)します if (!iframe) {
        console.error("ID 'google-spreadsheet-iframe' の Iframe 要素が見つかりません。");
        // iframe が存在しない場合は、スピナーがスタックしないように直接非表示にします if (spinner) {
            スピナー.スタイル.ディスプレイ = "なし";
        }
        戻る;
    }

    //初期狀態(tài): 読み込みインジケーターを表示します (CSS のデフォルトですでに設(shè)定されています。ここで確認(rèn)してください)
    if (スピナー) {
        スピナー.スタイル.ディスプレイ = "フレックス"; // または「ブロック」
    }

    // iframe の読み込みイベントをリッスンする iframe.addEventListener("load", () => {
        console.log("Google スプレッドシートの iframe コンテンツが読み込まれました。");

        // コンテンツが読み込まれた後、読み込みインジケーターを非表示にします if (スピナー) {
            スピナー.スタイル.ディスプレイ = "なし";
        }

        // iframe コンテンツを表示 iframe.style.opacity = "1";
        // 以前にdisplay: noneが設(shè)定されていた場合は、ここでdisplay: blockに変更する必要があります。
        // iframe.style.display = "ブロック"; 
    });

    // ロードの失敗またはタイムアウトを考慮します (オプションで、より高度なエラー処理)
    // iframe.addEventListener("エラー", () => {
    // console.error("Google スプレッドシート iframe の読み込みに失敗しました。");
    // if (スピナー) {
    // スピナー.スタイル.ディスプレイ = "なし";
    // }
    // // エラー メッセージまたは代替コンテンツを表示できます // });
});

例証します:

• document.addEventListener("DOMContentLoaded", ...) は、iframe 要素とスピナー要素を正しく取得できるように、DOM が完全にロードされた後に JavaScript コードが実行されるようにします。
• iframeとスピナーのDOM參照を取得しました。
• iframe.addEventListener("load", ...) では、
• デバッグを容易にするために、基本的なエラー処理とコンソール ログが追加されました。

注意事項(xiàng)と最適化

1. JavaScript の実行タイミング: の最後に <script> タグを置くか、DOMContentLoaded イベント リスナーを使用して、iframe 要素を取得するときに要素が DOM にすでに存在していることを確認(rèn)します。</script>
2. Spinner の UI/UX : この記事の例では単純な CSS アニメーションを使用していますが、実際のプロジェクトでは、よりプロフェッショナルな SVG アニメーション、GIF 畫像、またはサードパーティのライブラリ (SpinKit、Font Awesome など) を使用して、より美しい読み込みインジケーターを作成できます。
3. クロスドメイン制限: iframe.onload イベント自體はクロスドメイン制限の対象ではありません。埋め込まれた
4. 初期表示: ページが読み込まれるとすぐに読み込みインジケーターが表示されるようにし、「ちらつき」や短い白い畫面を避けるために読み込みが完了するまで
5. ユーザー エクスペリエンス フィードバック: 読み込み時(shí)間が非常に長い (例: 30 秒以上) 場合、回転するインジケーターだけではユーザーを安心させるのに十分ではない可能性があります。インジケーターの下に「データを読み込んでいます。しばらくお待ちください...」などのテキスト プロンプトを追加するか、より詳細(xì)なフィードバックを提供する進(jìn)行狀況バーを追加することを検討してください。
6. CDN とキャッシュ: Google スプレッドシートへのパブリック リンクが有効であることを確認(rèn)し、可能であれば CDN とブラウザのキャッシュ メカニズムを活用して、靜的リソースの読み込みを高速化します。

要約する

JavaScript の iframe.onload イベントを利用すると、Google スプレッドシートやその他の外部コンテンツを埋め込むときに発生する「白い畫面」問題を効果的に解決できます。コンテンツの読み込み中に動(dòng)的読み込みインジケーターを表示することで、ユーザー エクスペリエンスが大幅に向上し、ユーザーにページのステータスを明確に理解してもらい、不必要な待ち?xí)r間の不安を回避できます。この方法はシンプルかつ効果的で、埋め込みコンテンツの読み込みエクスペリエンスを最適化する重要な手段です。

以上がiframe に埋め込まれた Google シートの読み込みエクスペリエンスを最適化: 読み込みインジケーターを?qū)g裝の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。