JQuery - Carga muy lenta de páginas con .load

Carga muy lenta de páginas con .load

Publicado por David (6 intervenciones) el 17/08/2014 10:15:38

Hola, soy muy novato en jquery y estoy creando una web donde he utilizado un script, el .load para cargar la cabecera y el menú en todas las páginas de laweb, así no he de ir modificandolo muchas veces.

El caso es que funciona muy bien pero me pasa que primero me carga el contenido de la página y unos segudos después (4 o 5, a veces más) me carga el menú.

Habría alguna manera de que cargara todo a la vez ??

Este es el script en el head:

<head>

		<script type="text/javascript">

			$(document).ready(function(){

   				$("#aqui_menu").load('cabecera_menu.html');

   				return false;

})

		</script>

	</head>

La web es : http://www.dominiopracticas.tuars.com/fx/index.html

Gracias !!!

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 11

Val: 32

Carga muy lenta de páginas con .load

Publicado por txema (9 intervenciones) el 17/08/2014 16:04:08

Hola David:

Aunque estoy lejos de ser experto en jQuery, me llama la atención que en cabecera_menu.html cargas, sin necesitarlas en la hoja/página

<script src="prefix-free.js"></script>

<script src="external/jquery/jquery.js"></script>

<script src="jquery-ui.js"></script>

Si bien jQuery lo carga de forma asíncrona, siempre cargará todo después del HTML de la página (index.html).

Cabe pensar que los archivos script como css ya están en caché, pero me temo que la página comprueba que efectivamente son los mismos códigos.

Hay otras formas de cargar el menú de forma síncrona y rápida (personalmente lo hago mediante PHP, ahorrándome cabeceras y el enmarcado completo de página <html>).

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Carga muy lenta de páginas con .load

Publicado por David (6 intervenciones) el 17/08/2014 17:45:12

Hola txema, gracias por contestar.

Primero decirte que si no cargo esos 3 scripts en cabecera_menu.html no funciona nada, me salen la cabecera y los menús descuadrados y sin sentido.

Lo del php no le he tocado nunca, como sería la manera de hacerlo para poner el mismo menú en todas las páginas ?

Gracias.

Valora esta respuesta

Comentar

Pos: 11

Val: 32

Carga muy lenta de páginas con .load

Publicado por txema (9 intervenciones) el 17/08/2014 18:42:04

David:

Sin perjuicio a que alguien te dé una solución directa con jQuery, lo que te comentaba anteriormente es que eliminases los script (javascript). En cabecera_menu.html enlazas con

<link rel="stylesheet" type="text/css" media="all" href="estilo_menu.css" />

que es neceasrio para ajustar tu menú y que se debe mantener.

La variable para hacerlo mediante PHP sería lo siguiente:

1.- Añade a index.html el enlace a estilo_menu.css

<link rel="stylesheet" type="text/css" media="all" href="estilo_menu.css"/>

2.- Sustituye la línea

<!-- Inicio Cabecera/Menú en javascript-->

<div id="aqui_menu"></div>

<!-- Fin -->

por esta otra

<?php require("cabecera_menu.php"); ?>

y la guardas como index.php

3.- Cambia el archivo cabecera_menu.html por este código

<?php

echo '<div class="container">

//  Inicio Menú

	        <div class="wrap">

				<nav>

					<ul class="menu">

						<li><a href="index.html"><span class="iconic home"></span> Inicio</a></li>

						<li><a href="#"><span class="iconic dial"></span> Equipo</a>

							<ul>

								<li><a href="chicas_fx">Chicas</a></li>

								<li><a href="chicos_fx">Chicos</a></li>

								<li><a href="ninos_fx">Niños</a></li>

							</ul>

						</li>

						<li><a href="#"><span class="iconic box"></span> Fotos</a>

							<ul>

								<li><a href="fotos_fx.html">Archivo Fotos</a></li>

								<h3>Últimas Subidas:</h3>

								<li><a href="https://plus.google.com/u/0/photos/+AlexMoncasi/albums/6038403346161245937" target="_blank">3x3 Mataró</a></li>

								<li><a href="https://plus.google.com/u/0/photos/+AlexMoncasi/albums/6020259317664028289" target="_blank">Cursa Muntanya Alpens</a></li>

								<li><a href="https://plus.google.com/photos/+AlexMoncasi/albums/6007246681436671505" target="_blank">FortaSex a Olot</a></li>

							</ul>

						</li>

						<li><a href="#"><span class="iconic move"></span> Videos</a>

							<ul>

								<li><a href="videos_fx.html">Archivo vídeos</a></li>

								<h3>Últimos Subidos:</h3>

								<li><a href="vid39.html">Video

									Telenotícies</a></li>

								<li><a href="vid38.html">Trailer 3x3 Masnou</a></li>

							</ul>

						</li>

						<li><a href="#"><span class="iconic calendar"></span> Actividades</a>

							<ul>

								<li><a href="https://docs.google.com/spreadsheet/ccc?key=0AjS3vN_wxmu5dG1xS1MxNm9jMEgtS21uekJMVzc5VUE#gid=6" target="_blank">Doc Curses</a></li>

							</ul>

						</li>

						<li><a href="#"><span class="iconic pencil-alt"></span> Especiales</a>

							<ul>

								<li><a href="http://www.wix.com/d23vd8/bssfortasex">B/SS 2011</a></li>

								<li><a href="http://d23vd8.wix.com/bss2012_fortasex">B/SS 2012</a></li>

								<li><a href="http://d23vd8.wix.com/bssfortasex13">B/SS 2013</a></li>

							</ul>

						</li>

						<li><a href="#"><span class="iconic mail"></span> Contacto</a>

							<ul>

								<li><a href="#">No Disponible</a></li>

							</ul>

						</li>

					</ul>

					<div class="clearfix"></div>

				</nav>

			</div>';

//  Fin Menú

?>

y lo guardas como cabecera_menu.php

Observa que ahora los dos archivos van, necesariamente, con extensión .php y que los comentarios se escriben de forma diferente.

No creo que tengas problemas con las comillas simples y dobles. Si te aparece algún error nos dices en qué línea y archivo.

Nos comentas si mejora la carga y cómo va.

Reedito:

Ahora su script

<script type="text/javascript">

			$(document).ready(function(){

   				$("#aqui_menu").load('cabecera_menu.html');

   				return false;

})

		</script>

sobra.

Valora esta respuesta

Comentar

Carga muy lenta de páginas con .load

Publicado por David (6 intervenciones) el 18/08/2014 08:29:03

Hola txema, acabo de probar todo lo q me has explicado y FUNCIONA !!

La diferencia entre como cargaba antes y ahora es abismal.

Yo estoy empezando con html5, css3 y jquery y soy muy novato.
De php se 0 por eso ni conocía esa solución. Esta semana ya empiezo un curso para al menos conocer lo básico.

Esta web la estoy haciendo para aprender e iré implementando cosas a medida q sepa más.

Gracias de nuevo !
Una ayuda de 10 !!

Valora esta respuesta

Comentar

Pos: 1

Val: 302

Carga muy lenta de páginas con .load

Publicado por xve (673 intervenciones) el 18/08/2014 04:47:21

Hola David, estoy completamente de acuerdo con Txema, lo mejor es que los cargues directamente desde PHP, es muchísimo mas rápido.

Otro problema que veo en tu página, es que no utilizas los archivos de jquery y jquery-ui comprimidos!!! cargas casi 700Kb solo de esos dos archivos... es muchísimo!!! si utilizas los comprimidos, no llegara a los 200Kb

Valora esta respuesta

Comentar

Carga muy lenta de páginas con .load

Publicado por David (6 intervenciones) el 18/08/2014 08:32:44

Hola xve,

He de cambiar entonces los archivos de jquery y jquery-ui por los q acaban en .min ??

Gracias por contestar.

Valora esta respuesta

Comentar

Pos: 1

Val: 302

Carga muy lenta de páginas con .load

Publicado por xve (673 intervenciones) el 18/08/2014 10:12:24

Si exacto David!!! veras que ocupan mucho menos!!!

Valora esta respuesta

Comentar

Carga muy lenta de páginas con .load

Publicado por David (6 intervenciones) el 18/08/2014 15:37:17

Si, he visto que ocupan bastante menos pero el jquery no tengo el archivo .min, del jquery-ui si.

Solo he podido modificar uno.

Valora esta respuesta

Comentar

Pos: 1

Val: 302

url para descargar jquery

Publicado por xve (673 intervenciones) el 18/08/2014 20:13:29

Descarga-lo de la web de jquery...http://jquery.com/download/

Valora esta respuesta

Comentar

url para descargar jquery

Publicado por David (6 intervenciones) el 18/08/2014 23:12:39

Lo buscaré.

Gracias !!

Valora esta respuesta

Comentar

Ocultar/Mostrar tabla dentro de otra tabla.

obtener valor con select en funcion