16

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

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

問題のウェブサイトはこちらhttp://www.chriszachary.com/portfolio

ユーザーがマウスで画像のスクロールを制御できるように、javascriptモーションギャラリーを使用しています。ページが完全に読み込まれるまで、画像はスクロールしません。混乱を最小限に抑えるために、gif 画像を読み込む方が効率的であると考えましたが、うまくいきません。ポートフォリオ カテゴリ (結婚式、婚約、ポートレート) のいずれかをクリックすると、画像の読み込みにかなりの時間がかかることに気付くでしょう。

誰かが iframe 内でこれを達成する方法を教えてくれたら、教えてください。そして、どのコードをどこで使用するかを具体的に教えていただければ、私は初心者です:|

事前に感謝します、答えを楽しみにしています:)

4

2 に答える 2

32

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>
于 2012-08-27T18:34:45.287 に答える