Avoid browser flickering with dark backgrounds

There is no ultimate solution to avoid the white phase when switching pages in the browser.

Here is a rather simple strategy using embedded pictures. This is usually not recommended as the necessary base64 encoding includes quite some overhead. It influences, however, the browser rendering by basically blocking the download of the remaining page which is probably the anti-flickering effect.

echo '<img src="data:image/png;base64,';
echo base64_encode(file_get_contents($file));
echo '"/>';

Works mostly, but not always. Another interesting approach has been suggested by another user, eg decreasing page loading time by async loading before switching between pages. I didn’t like that so much as it keeps the pages in your browser piling up.

So finally I did a small page only with a large iframe that is covered by a black div and removed only after loading the iframe content. Works on all tested browsers.

<style>
#preload {
background:black;
width:100%;
height:100%;
z-index:2;
top:0px;
left:0px;
position:absolute;
}
</style>

<script>
$(function(){
   $('#iframe').load(function(){
    $(this).show();
    $('#preload').fadeOut();
  });
});
</script>

<div id="preload">loading...</div>

<iframe src="http://external.url.de" id="iframe">
</iframe>