?
Solved

White flicker on page load usingiframe

Posted on 2011-09-07
19
Medium Priority
?
2,563 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

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 1600 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
 
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 400 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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

771 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