1

A la hora de refrescar mi pagina se me descolocan los desplegables pero despues de un par de segundos se colocan en su sitio. Es posible que sea por Jquery? o porque al hacer peticiones con php al recargar la pagina, este unos segundos colapsado (porque no se ha generado bien el css)... alguien sabe que puede ser?? Las peticiones se hacen mediante ficheros PHP pero enlazados con AJAX (js) y las funciones de desplegado con Jquery.

Dejo una captura.

Saludos

<?php
@session_start();

  $user_agent = $_SERVER['HTTP_USER_AGENT'];

function getBrowser($user_agent){

if(strpos($user_agent, 'MSIE') !== FALSE)
   return 'Internet explorer';
 elseif(strpos($user_agent, 'Edge') !== FALSE) //Microsoft Edge
   return 'Microsoft Edge';
 elseif(strpos($user_agent, 'Trident') !== FALSE) //IE 11
return 'Internet explorer';
 elseif(strpos($user_agent, 'Opera Mini') !== FALSE)
   return "Opera Mini";
 elseif(strpos($user_agent, 'Opera') || strpos($user_agent, 'OPR') !== FALSE)
   return "Opera";
 elseif(strpos($user_agent, 'Firefox') !== FALSE)
   return 'Mozilla Firefox';
 elseif(strpos($user_agent, 'Chrome') !== FALSE)
   return 'Google Chrome';
 elseif(strpos($user_agent, 'Safari') !== FALSE)
   return "Safari";
 else
   return 'No hemos podido detectar su navegador';


}


$navegador = getBrowser($user_agent);

if ($navegador=="Google Chrome"){
   require ("config/userLogin.php");
}else {
  if(!isset($_SESSION['user'])){
header('location:/noautologin/noautologin.php');
  }
}




  require ("functions/controlpermisos.php");
  require ("config/conexiones.php");
  require ("querys/queryshome.php");
  require("querys/querysestructura.php");
  require ("functions/functions.php");
  require("functions/functionsestructura.php");

  $acceso=verificarUsuarioBest($_SESSION['user'],$intranetconn);
  if ($acceso == false){
header('location: /Intranet-BEST/noautologin/noautologin.php');
  }

?>

<!doctype html>
<html class="no-js" lang="es">
  <head>
<!-- FAVICON-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!--meta -->
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Intranet BEST</title>

<!-- Google fonts -->
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

<!-- Estilos -->
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/notifications.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/ns-default.css" />
<link rel="stylesheet" href="css/ns-style-growl.css" />
<link rel="stylesheet" href="css/ns-style-other.css" />
<link rel="stylesheet" href="css/ns-style-bar.css" />
<link rel="stylesheet" href="css/mCustomScrollbar.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">


<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/backoffice.css" />
<link rel="stylesheet" href="angular/styles/style.css" />


<?php
   echo currentModuleCSS();
?>
<!-- icono app para Apple -->
<link rel="apple-touch-icon" href="apple-touch-icon.png" />

<script src="js/vendor/jquery.min.js"></script>



<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>


  </head>
  <body ng-app="chatBest">

<!--
<div id="box-notifications" class="ns-box ns-other ns-effect-thumbslider ns-type-notice" style="position:fixed; bottom:0; right:0;"></div>
<button id="notification-trigger" style="position:absolute;top:0px;">
  <span class="content">Mostrar notificacion</span>
  <span class="progress"></span>
</button>-->
<?php
$permiso="acceso back-office";
$validar = controlAcceso($nick,$permiso,$intranetconn);
if ($validar == true){ ?>

<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
  <aside class="off-canvas position-left" id="offCanvas" data-off-canvas>
    <ul class="off-canvas-list">
      <li class="title-head-menu"><label>Backoffice Menu</label></li>
      <?php
      $permiso="acceso comunicaciones";
      $validar = controlAcceso($nick,$permiso,$intranetconn);
      if ($validar == true){ ?>
      <li class="title-menu"><a href="#" class="off-canvas-submenu-call">Comunicaciones<span class="right"> + </span></a></li>
      <ul class="off-canvas-submenu">
        <li><a class="navlink" onclick="navbackoffice('modules/backoffice/comunicaciones/gestion_comunicaciones.php')" >Gestor de entradas</a></li>
        <li><a class="navlink" onclick="navbackoffice('modules/backoffice/comunicaciones/agregarComunicado.php')">Añadir entrada</a></li>
      </ul>
   <?php } $permiso="acceso noticias";
      $validar = controlAcceso($nick,$permiso,$intranetconn);
      if ($validar == true){ ?>
      <li class="title-menu"><a href="#" class="off-canvas-submenu-call">Noticias<span class="right"> + </span></a></li>
      <ul class="off-canvas-submenu">
        <li><a class="navlink" onclick="navbackoffice('modules/backoffice/noticias/gestion_noticias_externas.php')" >Gestor de noticias</a></li>
        <li><a class="navlink" onclick="navbackoffice('modules/backoffice/noticias/anadir_noticias/index.php')" >Añadir noticia</a></li>
      </ul>
      <?php }
      $permiso="acceso buzon sugerencias";
      $validar = controlAcceso($nick,$permiso,$intranetconn);
      if ($validar == true){ ?>
      <li class="title-menu"><a href="#" class="off-canvas-submenu-call">Buzón sugerencias<span class="right"> + </span></a></li>
      <ul class="off-canvas-submenu">
        <li><a class="navlink"onclick="navbackoffice('modules/backoffice/sugerencias/gestion_sugerencias.php')">Gestión sugerencias</a></li>

      <!--  <li><a class="navlink"onclick="navbackoffice('modules/backoffice/sugerencias/gestion_sugerencias.php?estado=Pendiente')">Pendientes</a></li>

        <li><a class="navlink"onclick="navbackoffice('modules/backoffice/sugerencias/gestion_sugerencias.php?estado=Tramitandose')">Trámitandose</a></li>

        <li><a class="navlink"onclick="navbackoffice('modules/backoffice/sugerencias/gestion_sugerencias.php?estado=Realizada')">Realizadas</a></li>


        <li><a class="navlink"onclick="navbackoffice('modules/backoffice/sugerencias/gestion_sugerencias.php?estado=Rechazada')">Rechazadas</a></li>-->
      </ul>
      <?php }

      $permiso="creacion menu";
      $validar = controlAcceso($nick,$permiso,$intranetconn);
      if ($validar == true){ ?>
       <li class="title-menu"><a class="off-canvas-submenu-call" href="#">Menú cantina<span class="right"> + </span></a></li>
          <ul class="off-canvas-submenu">
            <li><a class="navlink" onclick="navbackoffice('modules/backoffice/menu/menu.php')" >Edición menú cantina</a></li>
          </ul>
      <?php }
        $permiso="gestion hph weekly";
        $validar = controlAcceso($nick,$permiso,$intranetconn);
        if ($validar == true){ ?>
         <li class="title-menu"><a class="off-canvas-submenu-call" href="#">Hutchison Bulletin<span class="right"> + </span></a></li>
            <ul class="off-canvas-submenu">
              <li><a class="navlink" onclick="navbackoffice('modules/backoffice/hph-weekly/index.php')" >Añadir Hutchison Weekly Bulletin</a></li>
            </ul>
      <?php  } ?>
    </ul>


  </aside>
  <div class="off-canvas-content" data-off-canvas-content>
    <div class="title-bar title-bar-backoffice">
      <a href="#"><button type="button" class="menu-icon" data-toggle="offCanvas"></button></a>
      <a class="navlink" href="redirect.php"><img src="img/logos_nuevos/HPH_SOLO_SIMBOLO_WHITE.png"/></a>
      <span>Área de administración (Backoffice)</span>
    </div>
    <div class="content-frontoffice" id="content-frontoffice">

      <?php

        /*Añadimos los hooks del front-office*/
        require('header.php');
        require('nav.php');
        require('content.php'); 
        require('modules/aplicaciones/aplicaciones.php');
        require('footer.php');
      ?>
      <ng-view>  </ng-view>
    </div>
  </div>
</div>
  </div>
  <?php }else {

/* !!!!!! <<<<<----------------------- !!!!! */
 /* En estos ficheros se añade todo lo del front office (incluido la barra que da problemas*/
       /*Añadimos los hooks del front-office*/
        require('header.php');
        require('nav.php');
        require('content.php'); 
        require('modules/aplicaciones/aplicaciones.php');
        require('footer.php');
  } ?>


<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script src="js/snap.svg-min.js"></script>
<script src="js/notificationFx.js"></script>
<script src="js/mCustomScrollbar.concat.min.js"></script>
<script src="js/dropzone.js"></script>
<script src="js/jquery.airport-1.1.source.js"></script>
<script src="angular/js/dependencies/angular.js"></script>
<script src="angular/js/dependencies/angular-route.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="angular/js/dependencies/lodash.js"></script>
<script src="angular/js/app.js"></script>
<script src="angular/js/config.js"></script>
<script src="angular/js/controllers/chatController.js"></script>
<script src="angular/js/services/socketService.js"></script>

<script src="js/app.js"></script>
<script src="js/backoffice.js"></script>
<?php
   echo currentModuleJS();
 ?>
<input type="hidden" id="userConnected" name="name" value="<?php echo $_SESSION['user'] ?>">

<script>
                              
  var socket = io("http://localhost:3000");
  var username = "<?php echo $_SESSION['user'] ?>";
  socket.on('connect',function(){
    socket.emit('usernameConnected', username);
  });
</script>

  </body>
</html>

Yo creo que el error esta en esta parte del codigo

      if ($validar == true){ ?>
       <li class="title-menu"><a class="off-canvas-submenu-call" href="#">Menú cantina<span class="right"> + </span></a></li>
          <ul class="off-canvas-submenu">
            <li><a class="navlink" onclick="navbackoffice('modules/backoffice/menu/menu.php')" >Edición menú cantina</a></li>
          </ul>
      <?php }
        $permiso="gestion hph weekly";
        $validar = controlAcceso($nick,$permiso,$intranetconn);
        if ($validar == true){ ?>
         <li class="title-menu"><a class="off-canvas-submenu-call" href="#">Hutchison Bulletin<span class="right"> + </span></a></li>
            <ul class="off-canvas-submenu">
              <li><a class="navlink" onclick="navbackoffice('modules/backoffice/hph-weekly/index.php')" >Añadir Hutchison Weekly Bulletin</a></li>
            </ul>
      <?php  } ?>
    </ul>


  </aside>
  <div class="off-canvas-content" data-off-canvas-content>
    <div class="title-bar title-bar-backoffice">
      <a href="#"><button type="button" class="menu-icon" data-toggle="offCanvas"></button></a>
      <a class="navlink" href="redirect.php"><img src="img/logos_nuevos/HPH_SOLO_SIMBOLO_WHITE.png"/></a>
      <span>Área de administración (Backoffice)</span>
    </div>
    <div class="content-frontoffice" id="content-frontoffice">

      <?php

        /*Añadimos los hooks del front-office*/
        require('header.php');
        require('nav.php');
        require('content.php'); //Este hook es el variable, dentro de él controlaremos el módulo web que se está visualizando.
        require('modules/aplicaciones/aplicaciones.php');
        require('footer.php');
      ?>
      <ng-view>  </ng-view>
    </div>
  </div>
</div>
  </div>
  <?php }else {

       /*Añadimos los hooks del front-office*/
        require('header.php');
        require('nav.php');
        require('content.php'); //Este hook es el variable, dentro de él controlaremos el módulo web que se está visualizando.
        require('modules/aplicaciones/aplicaciones.php');
        require('footer.php');
  } ?>

Este es el desplegable

1
  • He estado inspeccionando la pagina cuando la recargo, y eston 1 segundo con esto --> Waiting (TTFB) el 19 dic. 2016 a las 11:44

2 respuestas 2

1

Es muy probable que sea por que se carga primero la página y después el CSS. Deberías separa el CSS prioritario (el que afecta a la primera visualización de la página) y colocarlo en la parte alta del head (o incluso inline para no tener que realizar carga), el resto del CSS lo puedes colocar bajo el body

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=es-419

6
  • Te refieres ha darle prioridad al css y despues que haga las peticiones del refresco? pero si las referencias que hago del CSS estan en el head!! puede influir el orden? el 19 dic. 2016 a las 11:34
  • ¿puedes añadir el código que estás utilizando o poner un link de la página en cuestión para ver mejor el problema? el 19 dic. 2016 a las 11:44
  • @PictorGames El orden influye. El HTML se lee de arriba a abajo y de izquierda a derecha. Los elementos que estan antes en el HTML se cargan primero.
    – user7176
    el 19 dic. 2016 a las 11:44
  • No puedo daros un link de la web porque es una intranet interna de una empresa! pero ya se cual es el problema... Nada mas iniciar la pagina esta haciendo una pregunta a la base de datos (FFTB) y eso hace que tarde en cargar. (inserto el codigo actualizando la pregunta) el 19 dic. 2016 a las 11:56
  • 1
    Pero el código que insertas es PHP. Eso se ejecuta en el servidor y no afecta a la visualización del frontend (Si tienes peticiones lentas en PHP lo que verás es más tiempo de pantalla en blanco hasta que recibe la respuesta del server). Muestra el código html completo que genera el php para ver que puede estar pasando en el front el 19 dic. 2016 a las 12:44
0

¿Con que navegador has observado esto? ¿Has probado con otros? A veces se pueden observar "anomalías" de visualización con un navegador concreto debido a como interpretan el código. Si te pasa con varios navegadores va a ser tu código, si el contenido de los menús depende de peticiones al servidor hay tienes ese intervalo para verlo correcto, tendrás que cargar datos antes de desplegar nada o buscar alguna otra solución.

1
  • Pasa con todos los navegadores... Creo que sera por la composicion de mi codigo CSS o la estructura Html que he de optimizarla mejor, como dice Guillermo de la Iglesia en el comentario de arriba el 19 dic. 2016 a las 11:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.