IFrame in HTML

Question

私はiframeをiframeで使用しています。異なるHTMLページをiframeに読み込み、そのHTMLページに画像があります。私はiframeにイメージをロードするたびに私はちらついている。私たちは何をするどのようにIフレーム

を使用することによってちらつきこと

を停止することができますか？

Answer 1

これに役立ついくつかのことがあります。

まず、画像の幅と高さを指定してください。ブラウザは、イメージのサイズがわかっているときに予約されたスペースのサイズを変更するのではなく、イメージのスペースを予約します。

例を提供しない場合は、必要に応じて事前ロードについて話すことができます。

Answer 2

ええと、どのようなちらつきを取り除きたいのか分かりませんが、ブラウザの読み込みに関連していて、新しいページをイメージで表示していると思います。

私は、次のイメージをバックグラウンドの別のiframeに読み込んだ後、現在表示されているiframeと新しく読み込まれたiframeを切り替える以外の方法は考えられません。

大きな問題は、なぜiframeを使用する必要があるかということです。あなたが所有していないサイトから何かをロードしていますか？もしそうでなければ、ajaxと他のそのようなテクニックを考えてください。

Answer 3

ちらつきを避けるには、onLoadコールバックイベントを.xmlに追加します。 onLoadコールバックが起動すると、iframeとその内容をフェードインできます。これはレイジーローディングの仕組みです。例：上記の例で

<iframe id="ifrm" src="http://www.example.com" onload="showImage()"></iframe>

、インラインフレームは、あなたのコンテンツをレンダリングします。上記iframeの読み込みが終了すると、showImage（）という関数を呼び出そうとします。スクリプトファイルにshowImageを定義するだけです。この関数を使用して、iframe DOMノードを見つけ出し、フェードインまたは表示する（表示：ブロック）スタイリングを変更することができます。例：

<script> 
function showImage() { 
    var iframe = document.getElementById('ifrm'); 
    iframe.style.opacity = 1; // using opacity. You can transition this 
    iframe.style.display = 'block' // using display. No transition 
} 

</script> 

フェードインしたい場合は、以下のようにiframeにCSSを追加できます。例：

#ifrm { 
    opacity: 0; // Before the iframe load, make sure it is not visible 
    transition: 0.3s // This will make your iframe fade in on load 
} 

これは役立ちます。