Pages jumpy/flickering on navigating to other pages on the site

Hi

I have a site originally ASP which I have now converted to PHP . The pages are all the same size (re. height/width) but the php pages are jumpy or flickering on navigating through the site pages, alomost like they are being reloaded. Doesn’t happen with the asp pages. Both ASP & php pages use sql to retrieve database info. Both contain include files for the footer which include a single line of javascript to display a lightbox on click.

Hoping someone may have seen this issue before.

Best

Sue

Sue,

Do you know when they lived as ASP pages where they set not to cache and then have a loader that prepared the content. So when this was converted to PHP the HTML may still specify no cache which would cause all data to reload each time even if it doesn’t change from one load to the next? This will cause flickering.

Can you post the whole php page?

Steve

Hi Steve,

Thanks for your reply. No there wasn’t any non-cache effect in the header of the ASP pages. Not using a loader for the content either. Newbie to PHP so pages are definitely a work in progress.

This is an example of the HTML page:

<?php
include(“_private/logon_details.php”); ?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=“Content-Language” content=“no-bok”>
<meta charset=“iso-8859-1”>

&lt;link rel="icon" type="image/png" href="images/favicon.ico"&gt;
&lt;link rel="stylesheet" href="css/css-main.css" type="text/css" media="screen" /&gt;

</head>
<body>
<div class=“wrapper”>
<div class =“innerwrap”>
<div class=“home-link”><a href=“index.php”></a></div>
<div class=“navigation”>
<ul>
<li><a href=“prosjekter.php”>PROSJEKTER</a></li>
<li><a href=“samarbeidspartnere.php”>SAMARBEIDSPARTNERE</a></li>
<li><a href=“om-oss.php”>OM OSS</a></li>
<li>TJENESTER</li>
<li><a href=“http:www.blogspot.com/”>VÅR BLOGG</a></li>
<li><a href=“kontakt-oss.php”>KONTAKT OSS</a></li>
</ul>
</div>

&lt;div class ="tab_container"&gt;
&lt;div class= "capacity_nav"&gt;
&lt;ul class="tabs"&gt;
&lt;li&gt;&lt;a href="metallforming.php"&gt;Metallforming&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="mekanisk-bearbeiding.php"&gt;Mekanisk Bearbeiding&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="overflatebehandling.php"&gt;Overflatebehandling&lt;/li&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li class="maintab"&gt;&lt;a class="activetab"href="#"&gt;Sammenføying&lt;/li&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="varmebehandling.php"&gt;Varmebehandling&lt;/li&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="produktutvikling.php"&gt;Produktutvikling&lt;/li&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="verktøyutvikling.php"&gt;Verktøyutvikling&lt;/li&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="montasje.php"&gt;Montasje&lt;/li&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="subcapacity_nav"&gt;
&lt;ul class="subcat"&gt;
&lt;li&gt;&lt;a href="sveising-TIG.php"&gt;Sveising TIG&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="sveising-MIG.php"&gt;Sveising MIG&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="lodding.php"&gt;Lodding&lt;/li&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="liming.php"&gt;Liming&lt;/li&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class ="activesubtab" href="#"&gt;Friction Stiring Welding&lt;/li&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="robotsveising.php"&gt;Robotsveising&lt;/li&gt;&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="content_tjenester"&gt;
&lt;h1&gt;FRICTION STIRING WELDING&lt;/h1&gt;
&lt;hr class ="shiftleft16" &gt;
&lt;?php $subcapacity="Friction Stiring Welding";
include("script/displaysubcapacity.php");?&gt;

</div>

&lt;/div&gt;

</div>
<?php include(“footer.php”);?>

</div>

</body>
</html>

The displaysubcapacity.php script :

<?php
$rsSubCapacity = mysql_query(“SELECT * FROM S_tbl_sub_capacity where name= ‘$subcapacity’”)or die(mysql_error());

if ($rowCap = mysql_fetch_assoc($rsSubCapacity)) {

$SubCapID=$rowCap[‘id’];
$rsCompanySubCapacities=mysql_query(“SELECT * FROM S_tbl_company_sub_capacities where fk_sub_capacity_id= ‘$SubCapID’”)or die(mysql_error());
while ($rowCompSubCap = mysql_fetch_assoc($rsCompanySubCapacities)) {
$CompanyID=$rowCompSubCap[‘fk_company_id’];

$rscompany = mysql_query("SELECT * FROM S_tbl_company where id= '$CompanyID'")or die(mysql_error());
while ($result = mysql_fetch_assoc($rscompany)) {?&gt;

&lt;h2&gt;&lt;?php echo $result['name'];?&gt; &lt;/h2&gt;	
		&lt;p class="reducespace"&gt;
        &lt;?php  echo  $result['address']."". $result['postal_code']. " " . $result['postal_area'] ;?&gt;	
        &lt;/p&gt;
        &lt;p class="reducespace"&gt; Telefon: &lt;?php  echo $result['phone1'];?&gt;	
        &lt;/p&gt;
        &lt;p&gt;
        &lt;?php echo '&lt;a class ="maillink" href="mailto:' . $rsCompany['e_mail'] . '"&gt;' . $result['e_mail'] . '&lt;/a&gt;';?&gt;
        &lt;/p&gt;
		&lt;br&gt;
		 &lt;p class="reducespace"&gt;
		 &lt;?php echo $rowCompSubCap['description'];?&gt;
		 &lt;/p&gt;	
	&lt;?php	
	}

}
}

?>

And the footer.php script:

<div class=“footer”>

<a class=“bedrift1 hidetext” href = “javascript:void(0)” onclick = “document.getElementById(‘light1’).style.display=‘block’;document.getElementById(‘fade’).style.display=‘block’”>Sauda Maskinering AS</a>
<div id=“light1” class=“white_content”>
<?php
$Bedriftstr=“bedrift”;
include(“script/displaybedrift.php”);?>

<a class=“close” title=“close window” href = “javascript:void(0)” onclick = “document.getElementById(‘light1’).style.display=‘none’;document.getElementById(‘fade’).style.display=‘none’”>X</a></div>
<div id=“fade” class=“black_overlay”></div>
<?php mysql_close($con); ?>

Many thanks

Sue

Hi Sue,

Is this site public enough so we can view and analyze it with firebug or dragonfly? If so can you post a link? If not then could you post your C.S.S.

Please also post the contents of

[LIST]
[]include(“script/displaybedrift.php”);
[
]include(“_private/logon_details.php”);
[/LIST]as if we visit the link we won’t see the php of these files.

We will figure this out :slight_smile:
Steve

Is it the same in IE as Firefox? From memory IE waits until everything is ready before it loads the page and Firefox does not and that can have an effect.
I assume it is not the fact that some pages have a vertical scroll bar and others do not.

Hi

Just tested in Firefox, works perfectly, no jumping/flickering at all. Jumps in Chrome & Safari however & at its worse in IE. Any tips on how I can achieve the same smooth transition I see in FF in the other browsers?

Many Thanks

Sue

You can load your page content with AJAX after a skeleton page quickly loads - even in IE.

I only work on small sites and from memory I improved the flickering by including the header and footer on each page and only changing the page content; but this may not work in your case.

I suppose the more page content the more the “flicker”.

Hi Steve

I haven’t loaded page content with AJAX before, will do a search now on how to do it. If that doesn’t resolve the issue can I still post a link to the pages so you can have a look?

Many thanks for the info & help, very much appreciated.

Best

Sue

Hi again

Decided to post link hope that’s alright : iutvikling.no/ny/engineering-iutvikling.php. It is really only on the page TJENESTER that the flickering occurs.

The script for display bedrift.php is :

<?php
$Bedrift=utf8_decode($Bedriftstr);

$rs = mysql_query(“SELECT * FROM S_tbl_company where name= ‘$Bedrift’”)or die(mysql_error());

  while ($result = mysql_fetch_assoc($rs)) {?&gt;
  		&lt;h2&gt;&lt;?php echo $result['name'];?&gt; &lt;/h2&gt;	
		&lt;p class="reducespace"&gt;
        &lt;?php  echo  $result['address']."". $result['postal_code']. " " . $result['postal_area'] ;?&gt;	
        &lt;/p&gt;
        &lt;p class="reducespace"&gt; Telefon: &lt;?php  echo $result['phone1'];?&gt;	
        &lt;/p&gt;
        &lt;p&gt;
        &lt;?php echo '&lt;a class ="maillink" href="mailto:' . $result['e_mail'] . '"&gt;' . $result['e_mail'] . '&lt;/a&gt;';?&gt;
        &lt;/p&gt;
		&lt;br&gt;
        &lt;p&gt;
         &lt;?php echo '&lt;a class= "weblink" href="'. $result['web_address']. '"&gt;' . $result['web_address'] .'&lt;/a&gt;'; ?&gt;
         &lt;br&gt;&lt;br&gt;
         &lt;?php echo $result['description'];
		 }

?>

The logon.php without the particulars is :

<?php

// Connects to Database
$con = mysql_connect(“server”, “user”, “password”) or die(mysql_error());
mysql_select_db(“database”, $con) or die(mysql_error());
?>

Thanks again Sue

Hi Sue,

Thanks for the link!

I think the flickering is due to your background image loading, Ajax won’t help this as it is something that will be noticeable if you load it later. You could use a JS transition effect that would fade the background image for all your pages so it looks like it is done on purpose.

You can also try the following:


<!--[if IE]>    
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>    <meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />        
  <meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />    
  <script language="javascript" type="text/javascript">        
    try {
              document.execCommand("BackgroundImageCache", false, true);        
          } catch(e) {}    
   </script>
<![endif]-->

If your host allows .htaccess files then take a look here:[URL=“http://www.explainth.at/en/tricks/flickfix.shtml”]http://www.explainth.at/en/tricks/flickfix.shtml

Nothing obvious in your $Bedrift code that contributes to the flashing.

Another idea is to take out the background image replacing with a basic colour and see if you still get the flash. If you don’t then the background image is causing this issue in IE. Your background is 222.53 Kb, while that may not seem like a large image, it is for a background. If you are set on using this background then trying using GIMP or Photoshop (or your favourite image editor) and compress this image try 12-20 % quality. This should be between 30 - 50 Kb.

Let us know how this goes.

Regards,
Steve

Thank you so much for looking at the code Steve. Thanks too for the link, suggestions & HTML code, very much appreciated. I will try all your suggestions & let you know how I get on.

Have a great day there.

Regards

Sue