Webdesigner Webmaster Creador de proyectos de

  • Blog
  • ¿Quién soy yo?
  • Contacto directo

XHTML JavaScript Preloader versión 2.0.3

Aquí es un "preloader" que carga las páginas antes de mostrar el contenido. Este "preloader" muestra un gif animado al cargar un fondo blanco.

Aquí está un ejemplo de lo que puede dar consejos no usar este script si ha utilizado el botón de reinicio "de CSS. Y no se etiqueta "DIV" General "CSS", posición con la "a" todos los

Aquí está el código JavaScript en el preloader.


 / / Se puede cambiar la velocidad (velocidad) (1 == muy rápido)
 / / Se puede cambiar la calidad de la transición (1 == mejor)
 / / Como la transición es la calidad sobre la velocidad del más lento y debe aumentarse
 ; var velocidad = 10;
 ; transición var = 10;

 / / Tamaño de preloader en GIF animado
 ; GIFpreloadLargeur var = 20;
 ; GIFpreloadHauteur var = 20;

 ; var timer = 0;
 ; opacidad var = 100; 

 función de la opacidad ()
 (
     = opacidad opacidad - transición;

     ( "preloader" ) . style ; objeto var = documento. getElementById ( "preloader"). estilete;
     opaciT / 100 ) ; objeto. opacity = (opacity / 100);
     opaciT / 100 ) ; objeto. MozOpacity = (opacity / 100);
     opaciT / 100 ) ; objeto. KHTMLOpacity = (opacity / 100);
     + opaciT + ")" ; objeto. filter = "alpha (opacity =" + opacity + ")"; 

	 opaciT <= 0 ) if (opacidad <= 0)
	 (
		 "preloader" ) . style . visibility = "hidden" ; documento. getElementById ( "preloader"). estilo. visibility = "hidden";
		 ; clearInterval (timer);
	 )

 )

 precarga function ()
 (
	 document. getElementById ) if (document. getElementById)
	 (
		 "preloadIMG" ) . style . visibility = "hidden" ; documento. getElementById ( "preloadIMG"). estilo. visibility = "hidden";
		 ,speed ) ; temporizador = setInterval ( "opacidad ()", velocidad);
	 )

	 algo más
	 (
	   	 document. layers ) if (capas document.)
		 (
			 = "hidden" ; documento. preloadIMG. visibility = "hidden";
			 ,speed ) ; temporizador = setInterval ( "opacidad ()", velocidad);
	     )
	         algo más
		 (
			 . style . visibility = "hidden" ; documento. todos. preloadIMG. estilo. visibility = "hidden";
			 ,speed ) ; temporizador = setInterval ( "opacidad ()", velocidad);
		 )
	 )
 )

 / / Generar el CSS para PRECARGA
 var myCSS;
 myCSS = " 
  ; type= <style \" text/css \"> ";

 myCSS + = "html, (cuerpo height: auto; margin: 0px; padding: 0px;)";

 myCSS + = "# preloader (";
 myCSS + = "position: fixed;"
 myCSS + = "background-color: white;"
 myCSS + = "width: 100%;"
 myCSS + = "height: 100%;"
 myCSS + = "display: block;"
 myCSS + = 'z-index: 100000; "
 myCSS + = ")";

 myCSS + = "# (preloadIMG";
 myCSS + = "position: absolute;"
 myCSS + = "left: 50%;"
 ; myCSS + = "width:" + GIFpreloadLargeur + "px";
 ; myCSS + = "height:" + GIFpreloadHauteur + "px";
 GIFpreloadLargeur / 2 ) + "px;" ; myCSS + = "margin-left: -" + (GIFpreloadLargeur / 2) + "px";
 myCSS + = "top: 150px;"
 myCSS + = ")";

 myCSS + = "</ style> 

  ";

 / / Escribir CSS
 ( myCSS ) ; ventana. documento. escribir (myCSS);

 / / Ejecutar
 ( ) { preload ( ) ; } . ventana onload = function () (precarga ();)

Ahora, por favor introduzca el código siguiente después de la etiqueta BODY. Tome nota de que la "imagen de la precarga debe ser colocado en su servidor y la fuente debe ser cambiado en función de la" edroit o es su imagen.

 <div id="preloader">
 <div id="preloadIMG"> <img src="loading.gif" alt="" /> </ div>
 </ Div>

Bueno, ahora usted tiene un preloader para su chic páginas web pesados.

  • Compartir / Guardar

Etiquetas: Imágenes, Javascript, Preloader, XHTML

Este artículo fue publicado el miércoles, febrero 13, 2008 at 20:19 and is filed under Tutoriales. Puede seguir los comentarios a través de la alimentación el 2,0 RSS. Puedes dejar un comentario o un trackback desde tu propio sitio.

13 comentarios a la "versión XHTML JavaScript Preloader 2.0.3"

  1. PLSK dijo:
    Abril 20, 2008 at 12:32

    excepto que tengo un correo que aparece. Si puedo resolver este problema que me importa, de lo contrario ...

    En cualquier caso gracias por este script muy bonito

  2. n4ki dijo:
    Mayo 20, 2008 a las 11:53

    genial voy a probarlo

  3. Cheureul dijo:
    Mayo 26, 2008 at 9:02

    Muy buena iniciativa que preloader. Esto es lo que yo necesitaba para mi sitio, excepto por un detalle. Y evita que la carga de las animaciones en Flash. ¿Sería una solución simple a este problema?

  4. seb dijo:
    Junio 13, 2008 at 1:24

    Super Código por parte de los contras, tengo una preocupación, después de la creación de un código que funciona perfectamente, y mi n'on botón de menú ya no funcionan "rollover" en el IE, mientras que en la ópera, no hay problema

    Gracias, incluso cuando

  5. Xavier dice:
    Septiembre 3, 2008 a las 18:22

    Hola, gracias por este script es grande.
    pero ¿cómo podemos modificarlo para cargar más imágenes que no necesariamente se encuentra en la página?

  6. Blik dice:
    Septiembre 11, 2008 at 19:08

    Gran! Funciona muy bien .. pero también me puso en el índice de mi página web que hace referencia a mi foro, ¿cómo puedo integrar al índice de mi página web, sin poner ninguna de mis páginas del foro.

    Sólo quiero que la precarga del foro en el índice de bienvenida .. esse posible.

  7. Doodoo64 dijo:
    Enero 6, 2009, 13:09

    Francamente el sombrero ante este pedazo de código muy bien preparado. Pero tengo un pequeño problema.
    Aquí está la precarga pone en marcha como debería con el gif animado poco sólo cuando la página se carga la precarga no desaparece. Permanece en.
    Pero, ¿dónde puede venir? No puedo encontrar la solución ...

  8. Alexis dice:
    Junio 4, 2009 a las 3:50

    Hola,
    Gracias por este guión, que estaba buscando desde hace mucho tiempo. Felicitaciones funciona muy bien. Bonne continuation.

  9. trstn dijo:
    Junio 10, 2009 a las 5:07

    gracias por este código!
    impec caminar conmigo!

  10. JuJu dice:
    Octubre 10, 2009 a las 4:33

    Hola,
    No puedo subir mi toda somment sitio entero para que por favor?

  11. admin dijo:
    Octubre 11, 2009 a las 19:52

    Debería ver el código, es que usted me puede dar un desarrollo de vínculos?

  12. keurty37 dijo:
    Diciembre 29, 2009 a las 11:36

    bonjour a tous

    Entiendo o fau poner el primer código C está en la cabeza??

    gracias

  13. Patrick Perron dijo:
    Diciembre 29, 2009 a las 19:30

    Si usted debe colocar el código en la cabeza o en un archivo JavaScript externo que será en el cargador de la cabeza.

Deja tu comentario

  • Traductor

    French flagItalian flagEnglish flagGerman flagSpanish flagRussian flag   
    By N2H
  • Mis Categorías

    • Consejos (1)
    • Discovery (4)
    • Mis proyectos (1)
    • Mis logros (1)
    • Google News (1)
    • Personal (2)
    • Tutoriales (5)
    • Utilidades (3)
Get Adobe Flash player Plugin de wordpress temas wpburn.com

  • Enlaces
    • Color Scheme Generator
    • CSS Mania
    • Hotscripts.com
    • Joomla! En
    • Web Ranking de Información
    • Wordpress
  • My Domain Names
    • jelefais.com
    • karinevanasse.biz
    • karinevanasse.net
    • karinevanasse.org
    • lagrandecite.com
    • quebecphone.com
    • ubergate.com
    • ubergates.com
    • viewpc.com
  • Mis proyectos
    • Libre Configuración de la meta
    • Nubium Graphik
    • Nubium Test
    • Llegar a la humanidad
  • Socios
    • Aventuras de pesca con Cyril Chauquet
    • Kinologik
    • El Blog de Lana Prane
    • Oio - Cine Simon Goulet
    • Regístrate en tu vida
    • Regístrate en tu vida
    • Tutmarks