Solved

White flicker on page load usingiframe

Posted on 2011-09-07
19
2,445 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
html input 8 42
CORS Error from Chrome, but FireFox is OK 1 79
HTML Anchor Link Problem 3 35
2 separate CSS animations 2 16
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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)

840 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