IFrames in HTML

Question

i am using iframes in html.loading different html pages into iframes.in that html pages i have image. whenever i load the image into iframes i getting flickering.

can we stop that flickering by using Iframes

How to do ?

Answer 1

There are a few things you can do to help with this.

Firstly, make sure you specify the width and height of the image. The browser will then reserve space for the image, rather than resizing the reserved space when the size of the image is known.

If you wan supply an example, we can talk about pre-loading if it seems necessary.

Answer 2

You can avoid the flickering by adding an onLoad callback event to the . Once you onLoad callback fires, you will be able to fade in the iframe and its contents. This is how Lazy Loading works. Example:

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

In the above example, the Iframe will render your content. Once the above iframe finishes loading it will attempt to call a function called showImage(). All you have to do is define showImage in your script file. You can now use this function to find the iframe DOM node and alter the styling to fade it in, or show it (display: block). Example:

<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>

If you would like to fade it in, you can add some css to your iframe like below. Example:

#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
}

Hope this helps.

Answer 3

Hmm, I'm not entirely sure what sort of an flicker you want to get rid of, but I'd imagine it's related to the browser loading and then showing your new page with the image.

Well I can not think of any good ways, other than loading the next image into another iframe on background and then switching between the currently visible and the newly loaded iframe.

The bigger question is, why do you need to use the iframes? Are you loading something from a site that you do not own? If not, consider ajax and other such techniques.