• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2864
  • Last Modified:

White flicker on page load usingiframe

I have setup a site using iframes. The thing is though when you navigate to another page it flickers white for a second before showing the content...

http://www.riad-hikaya.com/index3.html

I have tries everything here but have just worked out that if I remove...<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>...from the pages behind the iframe the flicker does not happen (but of course no jquery functions work wither).

Any ideas how I can get both functions to work correctly ie the iframe and Jquery.

I have already posted a question relating to this here but as I narrowed it down I wanted to respost with more detail in different zones http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_27294188.html

On the all pages I am using the CSS

body {
      background-repeat: repeat-x;
      background-color: transparent;

      background-position: center top;
      background-image: url(images/bg.jpg);
      margin-top: 0px;
}

and the iframe code  <iframe src="/enter.html" width="1062" height="645" scrolling="no" frameborder="0" id="frame1"  allowTransparency="true" background="transparent"></iframe>
0
BrighteyesDesign
Asked:
BrighteyesDesign
  • 8
  • 7
  • 4
2 Solutions
 
BrighteyesDesignAuthor Commented:
Just to add this only occurs on IE8 and Chrome
0
 
EMB01Commented:
Why use an iframe, maybe try just using php:
<div style="width: 500px; height 700px; overflow: scroll; border: 1px solid #ccc; padding: 6px; "><?php include 'http://www.whateverwebsite.com/whateverwebpage.html'; ?></div>

Open in new window

0
 
BrighteyesDesignAuthor Commented:
Good thinking, but...

The whole reason the iframes came about is because my client insisted on continuous music throughout the website. The only way this can be achieved is by using two iframes, one for content and one for music. This means that the user stays on the same page and can turn the music off and on.

With the php include, as far as I understand, you'll be redirected to another page when you click on the menu. I may be wrong though? can PHP be used so the user stays on one page like an iframe even when clicking from page to page?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
BrighteyesDesignAuthor Commented:
I have just asked a question to the PHP experts  regarding using php instead of iframes and it's looking like the PHP include won't work... : (
0
 
EMB01Commented:
Try this, please:

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

Open in new window


Ref.  http://css-tricks.com/snippets/html/get-rid-of-white-flash-when-iframe-loads/
0
 
BrighteyesDesignAuthor Commented:
Still no joy, here's that code live...

http://www.riad-hikaya.com/index4.html
0
 
EMB01Commented:
Try this instead, please:
<iframe style="display:none" onload="this.style.display = 'block';" src="../examples/inlineframes1.html" > </iframe>

Open in new window

0
 
BrighteyesDesignAuthor Commented:
Thanks again,

Still the same though!, that code is on the link above
0
 
shdwmageCommented:
I think the best way to get around this would be to change the page content using AJAX and specifically declared divs. This way you never transfer off of the load page, and the music changing never becomes an issue because the page itself isn't changed.

At least just my personal thought, I haven't tested it as I normally don't use music on my websites.

(I also want to note I followed this from the PHP page)
0
 
EMB01Commented:
Remove the other code(s) I sent you and throw this into your <head>:
<?php
// 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);
    }

})();
?>

Open in new window

Also, try this:

You can put the allowtransparency="true" attribute on the iframe. You can set the iframe’s background to transparent with CSS. You can make sure the background on the source document matches the background of the parent page. None of that stuff works. This works. Well… it works for users with JavaScript turned on, anyway. =)

Ref.  http://www.phphosts.org/blog/2011/05/prevent-white-flash-while-iframe-loads/
0
 
EMB01Commented:
>>  At least just my personal thought, I haven't tested it as I normally don't use music on my websites.

That sounds like a good idea, too.
0
 
BrighteyesDesignAuthor Commented:
Tell me about it, i've spent more time trying to get the music working that designing and creating the whole site!
0
 
BrighteyesDesignAuthor Commented:
Still the white bg...http://www.riad-hikaya.com/index4.php..my code is now...


<script type="text/javascript">
// 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);
    }

})();
</script>

<title>Riad Hikaya</title>


<style type="text/css">        
body {
      background-repeat: repeat-x;
      background-color: transparent;

      background-position: center top;
      background-image: url(images/bg.jpg);
      margin-top: 0px;
}


</style>
</head>

<body>
<table width="100" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>    <iframe  src="/enter.html" width="1062" height="645" scrolling="no" frameborder="0" id="frame1" background="transparent"> </iframe></td>
  </tr>
  <tr>
    <td>  <iframe src="/music.html" width="1062" height="60"  frameborder="0" scrolling="no" ></iframe></td>
  </tr>
</table>
</body>
</html>



0
 
shdwmageCommented:
One of the biggest problems with iframes is that when you change the frame it still has to reload the entire webpage.  The "white screen" you are seeing is a delay in that page loading.

I can't really see a way around this "white screen" without preloading the images.  Once I have visited a page and revisit it using a cached version there is no more "white screen".

There are 3 ways I see to do this with the least amount of issues:
1- use flash
2- use AJAX and load the data into the div. With a loading image that shows up until the page shows
3- preload the images using hidden divs on the first page and load all the images.  this will drastically slow down your page however.

Given the choice I'd side with AJAX because I loathe flash!
But preloading the images would help.

I bypassed your frames and still see a slight white page when switching between pages.  It is the delay in loading the page content showing your flicker.

I hope that helps.  There isn't much you can do about the background disappearing because the page is being loaded fresh.
0
 
shdwmageCommented:
Additionally the preloading will only help the white disappear faster, it will still show up.  Missed that fact above sorry.
0
 
shdwmageCommented:
I apologize for the three posts in a row, but here is an example of how to code ajax:

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
It has a fairly good tutorial and a good demo of how it works.
0
 
EMB01Commented:
No, that's not a javascript; it's PHP.

Put this PHP code in your <head> and it should work.
<?php
// 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);
    }

})();
?>

Open in new window

0
 
EMB01Commented:
Edit:  Sorry, that's not PHP!  I was confusing it with something else.

If you already tried the transparency thing, then I would suggest to try using ajax as shdwmage recommends.
0
 
BrighteyesDesignAuthor Commented:
thanks for that, didn't solve it but that's probably because in this case there isn't a solution. Am now looking at Ajax...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 8
  • 7
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now