pagina llamar gratis funcion evento ejecutar desde cargar carga asincrona archivo antes activar javascript css web

javascript - llamar - ¿Cómo puedo hacer que el navegador espere para mostrar la página hasta que esté completamente cargada?



llamar archivo javascript desde html (16)

Además de la respuesta de Trevor Burnham si quieres lidiar con javascript deshabilitado y diferir la carga css

HTML5

<html class="no-js"> <head>...</head> <body> <header>...</header> <main>...</main> <footer>...</footer> </body> </html>

CSS

//at the beginning of the page .js main, .js footer{ opacity:0; }

JAVASCRIPT

//at the beginning of the page before loading jquery var h = document.querySelector("html"); h.className += '' '' + ''js''; h.className = h.className.replace( new RegExp(''( |^)'' + ''no-js'' + ''( |$)'', ''g''), '' '').trim();

JQUERY

//somewhere at the end of the page after loading jquery $(window).load(function() { $(''main'').css(''opacity'',1); $(''footer'').css(''opacity'',1); });

RECURSOS

Odio cómo puedes ver cómo se cargan las páginas web. Creo que sería mucho más atractivo esperar hasta que la página esté completamente cargada y lista para mostrarse, incluidos todos los scripts e imágenes, y luego haga que el navegador la muestre. Entonces tengo dos preguntas ...

  1. ¿Cómo puedo hacer esto?
  2. Soy un novato total para el desarrollo web, pero ¿es esta práctica común? Si no, ¿por qué?

Gracias de antemano por su sabiduría!

Además, asegúrese de que el servidor almacena en búfer la página y no la transmite de inmediato (durante el desarrollo) al navegador del cliente.

Como no ha especificado su pila de tecnología:

  • PHP: mira en ob_start
  • ASP.NET: asegúrese de que Response.BufferOutput = True (es por defecto)

Aquí hay una solución usando jQuery:

<script type="text/javascript"> $(''#container'').css(''opacity'', 0); $(window).load(function() { $(''#container'').css(''opacity'', 1); }); </script>

Puse esta secuencia de comandos justo después de mi etiqueta </body> . Simplemente reemplace "#container" con un selector para los elementos DOM que desea ocultar. .hide() varias variaciones de esto (incluyendo .hide() / .show() y .fadeOut() / .fadeIn() ), y simplemente establecer la opacidad parece tener el menor efecto negativo (parpadeo, cambio de altura de la página, etc. .). También puede reemplazar css(''opacity'', 0) con fadeTo(100, 1) para una transición más suave. (No, fadeIn() no funcionará, al menos no bajo jQuery 1.3.2.)

Ahora las advertencias: Implementé lo anterior porque estoy usando TypeKit y hay un molesto parpadeo cuando refrescas la página y las fuentes tardan unos cientos de milisegundos en cargarse. Así que no quiero que aparezca ningún texto en la pantalla hasta que TypeKit se haya cargado. Pero obviamente estás en un gran problema si usas el código anterior y algo en tu página no se carga. Hay dos formas obvias de mejorarlo:

  1. Un límite de tiempo máximo (por ejemplo, 1 segundo) después del cual todo aparece independientemente de que la página esté cargada o no
  2. Algún tipo de indicador de carga (por ejemplo, algo de http://www.ajaxload.info/ )

No me molestaré en implementar el indicador de carga aquí, pero el límite de tiempo es fácil. Solo agregue esto al script de arriba:

$(document).ready(function() { setTimeout(''$("#container").css("opacity", 1)'', 1000); });

Así que ahora, en el peor de los casos, su página tardará un segundo más en aparecer.

Aunque esto no siempre es una buena idea, eres libre de decidir si realmente quieres hacer eso. Hay algunas maneras diferentes de hacerlo, y encontré un ejemplo simple aquí:

http://www.reconn.us/content/view/37/47/

Probablemente no sea el mejor, pero debería ayudarlo a desarrollar su propia solución. Buena suerte.

Creo que esta es una muy mala idea. A los usuarios les gusta ver el progreso, simple y llanamente. Mantener la página en un estado durante unos segundos y luego mostrar instantáneamente la página cargada hará que el usuario sienta que nada está sucediendo y es probable que pierda visitas.

Una opción es mostrar un estado de carga en su página mientras que los procesos de cosas en segundo plano, pero esto normalmente está reservado para cuando el sitio está realmente procesando la entrada del usuario.

http://www.webdeveloper.com/forum/showthread.php?t=180958

Al final, al menos necesitas mostrar algo de actividad visual mientras la página se está cargando, y creo que tener la página cargada en pequeños trozos a la vez no es tan mala (suponiendo que no estés haciendo algo que ralentice seriamente la página tiempo de carga).

Espero que este código ayude

<html> <head> <style type="text/css"> .js #flash {display: none;} </style> <script type="text/javascript"> document.documentElement.className = ''js''; </script> </head> <body> <!-- the rest of your code goes here --> <script type="text/javascript" src="/scripts/jquery.js"></script> <script type="text/javascript"> // Stuff to do as soon as the body finishes loading. // No need for $(document).ready() here. </script> </body> </html>

Esta es una muy mala idea por todas las razones dadas, y más. Dicho esto, así es como lo haces usando jQuery :

<body> <div id="msg" style="font-size:largest;"> <!-- you can set whatever style you want on this --> Loading, please wait... </div> <div id="body" style="display:none;"> <!-- everything else --> </div> <script type="text/javascript"> $(document).ready(function() { $(''#body'').show(); $(''#msg'').hide(); }); </script> </body>

Si el usuario tiene JavaScript desactivado, nunca verá la página. Si la página nunca termina de cargarse, nunca verá la página. Si la página tarda demasiado en cargarse, pueden suponer que algo salió mal y simplemente ir a otra parte en lugar de * espere ... * ing.

Inmediatamente después de su etiqueta <body> agregue algo como esto ...

<style> body {opacity:0;}</style>

Y para la primera cosa en tu <head> agrega algo como ...

<script> window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);}; </script>

En la medida en que esto sea una buena práctica o mala depende de tus visitantes, y del tiempo que toma la espera.

La pregunta que aún queda abierta y no veo ninguna respuesta aquí es cómo asegurarme de que la página se haya estabilizado. Por ejemplo, si está cargando fuentes, la página puede volver a fluir un poco hasta que se carguen y se muestren todas las fuentes. Me gustaría saber si hay un evento que me dice que la página está hecha.

No use pantalla: ninguna. Si lo haces, verás las imágenes cambiar el tamaño / la posición cuando hagas el show (). Use la visibilidad: oculto en su lugar y establecerá todo correctamente, pero simplemente no será visible hasta que se lo indique.

Puede comenzar pidiendo que la página de índice principal de su sitio contenga solo un mensaje que diga "Cargando". Desde aquí podría usar ajax para buscar el contenido de su página siguiente e incrustarlo en el actual, al finalizar la eliminación del mensaje "Cargando".

Es posible que pueda salirse con la suya simplemente con incluir un contenedor de mensajes de carga en la parte superior de la página, que es 100% ancho / alto y luego eliminar dicho div en la carga completa.

El último puede no funcionar perfectamente en ambas situaciones y depende de cómo el navegador representa el contenido.

No estoy del todo seguro si es una buena idea. Para sitios estáticos simples, diría que no. Sin embargo, últimamente he visto muchos sitios pesados ​​de javascript de compañías de diseño que usan animación compleja y son de una página. Estos sitios usan un mensaje de carga para esperar que se carguen todos los scripts / html / css para que la página funcione como se espera.

Puedes ocultar todo usando algún CSS:

#some_div { display: none; }

y luego en javascript asigna una función a document.onload para eliminar ese div.

jQuery hace cosas como esta muy fácil.

Si bien estoy de acuerdo con los demás en que no deberías quererlo, explicaré brevemente lo que puedes hacer para marcar una pequeña diferencia sin recorrer todo el camino y bloquear el contenido que ya está allí; tal vez esto sea suficiente para mantener ambos usted y sus visitantes felices.

El navegador comienza a cargar una página y procesará css y js ubicados externamente más adelante, especialmente si el lugar donde se vinculan los css / js está en el lugar ''correcto''. (Creo que el consejo es cargar js lo más tarde posible, y usar css externos que cargue en el encabezado). Ahora, si tiene una parte de su css y / o js que desea aplicar lo antes posible, simplemente incluya eso en la página misma. Esto va en contra del consejo de las herramientas de rendimiento, como YSlow, pero probablemente aumentará el cambio de su página que aparece como desea que se muestre. ¡Use esto solo cuando realmente lo necesite!

Sin duda hay un uso válido para esto. Una de ellas es evitar que las personas hagan clic en enlaces / causando que ocurran eventos de JavaScript hasta que se hayan cargado todos los elementos de página y JavaScript.

En IE , podría usar transiciones de página que significan que la página no se muestra hasta que esté completamente cargada:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" /> <meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />

Observe la corta duración. Es suficiente para asegurarse de que la página no se muestre hasta que esté completamente cargada.

En Firefox y otros navegadores, la solución que he usado es crear un DIV que sea del tamaño de la página y blanco, luego al final de la página ponga JavaScript que lo oculte. Otra forma sería usar jQuery y ocultarlo también. No tan sencillo como la solución IE, pero ambos funcionan bien.

en PHP-Fusion Open Source CMS, http://www.php-fusion.co.uk , lo hacemos de esta manera en el núcleo -

<?php ob_start(); // Your PHP codes here ?> YOUR HTML HERE <?php $html_output = ob_get_contents(); ob_end_clean(); echo $html_output; ?>

No podrá ver nada cargando uno por uno. El único cargador será el navegador de la pestaña del navegador, y solo muestra todo en un instante después de que todo está cargado. Darle una oportunidad.

Este método es totalmente compatible en archivos html.

obligatorio: "use jQuery"

He visto páginas que ponen un div negro o blanco que cubre todo en la parte superior de la página, luego lo quita en el evento document.load. O podría utilizar. Listo en jQuery Dicho esto, era una de las páginas web más molestas que he visto en mi vida, aconsejaría que no fuera así .