Geek Answers Handbook

How to fix chrome flicker on iframe page reload

Chrome flickers when reloading content in an iframe. Can this be avoided in any way by thinking:

  • Wrapping a-links with js, which does some magic.
  • Meta tags in content-html. (I have the original html control in iframes)

Please note that the type of content in the iframe may differ (pdfs, html, images), so if ajax is the only way out, does it reflect the http-content type back into the iframe?

Visit the demo version of http://jsfiddle.net/2tEVr/

Excerpt script:

<iframe name="if" width="800" height="600"></iframe>

UPDATE

The solution that best helped me was to replace regular hrefs with ajax requests by refilling the body area (solution 4 below). The flicker has disappeared, but comes at akward debugging price, since the synchronization between the content and the "source" is lost at the request of ajax.

In addition, since the type of content in my case may change, the method for executing the ajax request should have some brain and possibly return to a regular location request.

Yours faithfully,

+7
html5 google-chrome web-applications
source share
2 answers

@ user247245: From your question it is not entirely clear how you (want) to use iframe. Does it reload periodically or once when the entire web page loads?

Solution 1: Background Color

If you just want to avoid the ugly white and avoid over complication. Set a different background color in the HTML header of the framecontents.html file, for example:

 <!DOCTYPE html> <html style="background-color: #F48;">

Thus, while the CSS file is being loaded, parsed and applied, the background is not #fff .

Solution 2: Transparent iframe

As long as there is no content, the iframe just should not be visible. Decision:

 <iframe src="/framecontents.html" allowTransparency="true" background="transparent"></iframe>

Of course, do not use this in combination with solution 1, you shoot in the foot.

Solution 3: Preload the iframe page

If you download the iframe later (for example, the user by clicking the link), consider preloading its contents. Hide this at the top of the page (of the parent):

 <iframe src="/framecontents.html" style="position: absolute; width: 0px; height: 0px"></iframe>

But I would advise using solution 2 instead.

Solution 4. If you are running a mobile web interface:

See how jQuery Mobile did it. We created a web interface that was supposed to look like a native application, so without rebooting. jQM fixed this. Basically makes an ajax background call to retrieve the full HTML content, and then extracts the body (the “page” div to be more precise), and then replaces the content (with a jump if you like). The countdown is displayed all this time.

In general, it looks like a mobile application: rebooting does not reboot. Other solutions:

Solution 5: use JS to enter CSS:

See jmva's answer or http://css-tricks.com/prevent-white-flash-iframe/ .

Solution 6: use JS to enter CSS (simple version)

 <script type="text/javascript"> parent.document.getElementById("theframe").style.visibility = "hidden"; </script> <iframe id="theframe" src="/framecontents.html" onload="this.style.visibility='visible';"></iframe>

You could, of course, leave the <script> and add style="visibility:hidden;" in the iframe, but the above will guarantee that the frame will be visible to visitors with JS disabled. In fact, I would advise you to do this, because 99% of visitors included it in any case, and its simpler and more effective.

+7
source share

A common trick is to display the iframe only when fully loaded, but it's better not to rely on it.

 <iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>

The same trick is slightly optimized using JS.

 // Prevent variables from being global (function () { /* 1. Inject CSS which makes iframe invisible */ var div = document.createElement('div'), ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0]; div.innerHTML = '&shy;<style> iframe { visibility: hidden; } </style>'; ref.parentNode.insertBefore(div, ref); /* 2. When window loads, remove that CSS, making iframe visible again */ window.onload = function() { div.parentNode.removeChild(div); } })();

Extracted from css-trick

If you need to switch between different sites, and this onload trick does not work, the only viable solution will be destroyed and will automatically create an iframe.

+2
source share

More articles:


All Articles