web-dev-qa-db-ja.com

iframeページコンテンツの読み込み中に読み込みgifを表示する

私が達成しようとしていることのさまざまな解決策を検索して試しましたが、役に立ちませんでした...

読み込みに少し時間がかかるiframeに大量の画像を読み込む写真のWebサイトに取り組んでいます。画像の読み込みが完了するまで、読み込み中のgif画像をiframeに表示したいと思います。

これが問題のWebサイトです http://www.chriszachary.com/portfolio

ユーザーがマウスで画像のスクロールを制御できるように、JavaScriptモーションギャラリーを使用しています。ページが完全に読み込まれるまで、画像はスクロールしません。混乱を最小限に抑えるために、私はgif画像のロードがより効率的であると考えましたが、それを引き出すことができません。ポートフォリオカテゴリ（ウェディング、エンゲージメント、ポートレート）のいずれかをクリックすると、画像の読み込みにかなりの時間がかかることがわかります。

誰かがiframe内でこれを達成する方法を教えてもらえるなら、私に知らせてください。また、使用するコードと場所を特定できる場合は、私は初心者です。|

回答をお待ちしております。

htmliframeloadingshowgif
16
Chris Zachary

そのページのIFRAMEタグを以下のHTMLに置き換えます。 IFRAMEはDIVで覆われており、ロードするイメージ（または任意のイメージ）が見つかります。画像はDIV領域の中央にあり、サイズは最大950x633ピクセルです。 IFRAMEページが読み込まれると、読み込み中の画像が非表示になります。

変更する必要があるのは、サイトの画像URLです。 DIV背景色を変更することもできます（現在は#FFFに設定されています）。

<style>
#loadImg{position:absolute;z-index:999;}
#loadImg div{display:table-cell;width:950px;height:633px;background:#fff;text-align:center;vertical-align:middle;}
</style>
<div id="loadImg"><div><img src="loading.gif" /></div></div>
<iframe border=0 name=iframe src="html/wedding.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>
30
Jay

Iframeが読み込まれたときにjqueryを使用してトリガーできます

$('#iframeTest').on("load", function () {
    console.log('iframe loaded'); //replace with code to hide loader
});
0
Ramesh Narayan