Solved

White flicker on page load usingiframe

Posted on 2011-09-07
19
2,364 Views
Last Modified: 2012-05-12
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
Comment
Question by:BrighteyesDesign
  • 8
  • 7
  • 4
19 Comments
 

Author Comment

by:BrighteyesDesign
ID: 36494853
Just to add this only occurs on IE8 and Chrome
0
 
LVL 14

Expert Comment

by:EMB01
ID: 36494934
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
 

Author Comment

by:BrighteyesDesign
ID: 36494980
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
 

Author Comment

by:BrighteyesDesign
ID: 36495205
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
 
LVL 14

Expert Comment

by:EMB01
ID: 36495291
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
 

Author Comment

by:BrighteyesDesign
ID: 36495910
Still no joy, here's that code live...

http://www.riad-hikaya.com/index4.html
0
 
LVL 14

Expert Comment

by:EMB01
ID: 36496444
Try this instead, please:
<iframe style="display:none" onload="this.style.display = 'block';" src="../examples/inlineframes1.html" > </iframe>

Open in new window

0
 

Author Comment

by:BrighteyesDesign
ID: 36496527
Thanks again,

Still the same though!, that code is on the link above
0
 
LVL 2

Accepted Solution

by:
shdwmage earned 400 total points
ID: 36496573
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 14

Expert Comment

by:EMB01
ID: 36496605
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
 
LVL 14

Expert Comment

by:EMB01
ID: 36496651
>>  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
 

Author Comment

by:BrighteyesDesign
ID: 36496698
Tell me about it, i've spent more time trying to get the music working that designing and creating the whole site!
0
 

Author Comment

by:BrighteyesDesign
ID: 36496729
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
 
LVL 2

Expert Comment

by:shdwmage
ID: 36496860
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
 
LVL 2

Expert Comment

by:shdwmage
ID: 36496872
Additionally the preloading will only help the white disappear faster, it will still show up.  Missed that fact above sorry.
0
 
LVL 2

Expert Comment

by:shdwmage
ID: 36496891
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
 
LVL 14

Expert Comment

by:EMB01
ID: 36496921
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
 
LVL 14

Assisted Solution

by:EMB01
EMB01 earned 100 total points
ID: 36496948
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
 

Author Closing Comment

by:BrighteyesDesign
ID: 36498346
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now