Solved

White flicker on page load usingiframe

Posted on 2011-09-07
19
2,405 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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)

867 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

22 Experts available now in Live!

Get 1:1 Help Now