Precarga

[lktmaster]

Hola,

Estoy haciendo una pagina web en html, que lleva unas fotografias enormes, el echo és que tarda unos 4minutos en terminar de cargarlo todo, y queria hacer una barra de cargando en html, javascript y css.

No he encontrado nada que no hable del ie4 y netscape 4 lo he probado, pero como era logico no funciona en ningun sitio, hace caso omiso a lo que ponga.

Hay alguna forma de hacerlo?

Muchas gracias de antemano.

[caricatos]

Hola:

Has probado lo que tenemos en las FAQs: ¿Cómo hacer una precarga viendo el porcentaje de carga?

Saludos

[lktmaster]

Perdona, no savia ni que havia esa parte del web, ¿des de android és posible entrar ahi?

Ya lo he usado y funciona perfectamente.

Muchisimas gracias, y otra vez disculpa las molestias.

[InKarC]

Ese script tiene varios inconvenientes, entre ellos que hay que listar las imágenes a utilizar en un Array javascript y tiene mas procedimientos de los que en realidad necesita.

Aqui uno que hice: XXX (para el mejor rendimiento hay que colocarlo antes de cerrar el <body)

[caricatos]

Iniciado por InKarC

Ese script tiene varios inconvenientes, entre ellos que hay que listar las imágenes a utilizar en un Array javascript y tiene mas procedimientos de los que en realidad necesita.

Aqui uno que hice: XXX (para el mejor rendimiento hay que colocarlo antes de cerrar el <body)

Hola:

Aunque siempre se pueden mejorar los scripts de las FAQs, no veo en tu "mejora", que sea realmente una mejora ... de todos modos puedes poner el código, ya que he borrado el enlace; que por cierto, no se permiten enlaces de ese tipo (puedes usar imágenes normales como paisajes o similares...)

Saludos

[InKarC]

Fotos de mujeres en bikini no son normales???? Que clase de problema sociologicomental tiene usted caballero?

-----------------------

Si no ve la diferencia por que es mejor es por su vision parcializada; vuestro script usa " setTimeout("cargando()", 100)" lo que significa que ejecuta ese setTimeout (una funcion) cientos de veces (o miles, si son muchas fotos); el mio usa listeners, por lo que quiere decir que el evento solo es ejecutado cuando la carga (o error) se ha llevado a cabo.

Su codigo no es entendible en absoluto; y el mio tampoco lo es tanto, pero desifrar 20 lineas es muchos mas facil que decifrar 100 con funciones intercaladas y haciendo uso de cosas como arguments.length que no tienen fundamento practico para ser usadas y son absolutamente desconocidas para un novato.

-----------------------


Esta deberia ser para usted

Hasta nunca.

[lktmaster]

Yo realmente no se qual és el mejor, pk tampoco he visto el de InKarC.

Estoy usando el de FAQs y me da un problema, que solo me enseña el final y el inicio, no hace el efecto de cargando.

Por que puede ser?los links de las imagenes estan bién y el codigo lo he usado tal qual poneis.

[caricatos]

Hola:

La función de InKarC, se ve en este mensaje: 'Galeria' de imágenes, pero básicamente hace lo mismo.
Posiblemente se trate porque tengan poco peso, pero debe funcionar bien.
Puedes verlo aquí: Imágenes

Saludos

[lktmaster]

Muchas gracias caricatos,

Pero no és porque las imagenes tengan poco peso, porque me tiro un monton de tiempo cargandolas.

No se si he escrito algo mal, o no lo entiendo ya que quando lo cuelgo en el servidor me paso un buen rato viendo como se van cargando las imagenes, y no se mueve hasta el final.

Los links estan bien puestos, porque quando los ponia mal, en el opera y en el explorer no hacia el fadeout que le pongo quando esta cargado y con las direcciones bien ya lo hace.

Código HTML:

 <script>
		function precargar()    {
		    var dibujos = new Array(precargar.arguments.length);
		    for (var i = 0; i < dibujos.length; i ++)    {
		        dibujos[i] = new Image();
		        dibujos[i].src = precargar.arguments[i]
		    }
		    return dibujos;
		}

		function precargados(dibujos)    {
		    var parciales = true;
		    for (var i = 0; i < dibujos.length; i ++)
		        parciales = (parciales && dibujos[i].complete);
		    return parciales;
		}

		function porciento(dibujos)    {
		    var parciales = 0;
		    for (var i = 0; i < dibujos.length; i ++)
		        parciales += (dibujos[i].complete) ? 1 : 0;
		    return parseInt(100 * parciales / dibujos.length);
		}  
	 </script>  
	<script>
	var imagenes;
	function continuar()    {
	    $('#load').fadeOut(1000);
	}

	function cargando()    {
	    document.getElementById("estate").style.width = porciento(imagenes) + "%";
	    if (precargados(imagenes))
	        continuar();
	    else
	        setTimeout("cargando()", 100);
	}
 
function ini()    {
    imagenes = new precargar(
		"images/bases/back.png",
	    "images/bases/inst_cart2.png",
		"images/bases/logo.png",   
		"images/bases/postit2.png",
		"images/bases/postit.png",
		"images/bases/pen.png",
		"images/bases/paper.png",
		"images/tools/zoom-.png",
		"images/tools/zoom.png",
		"images/maps/africafis.png",
        "images/maps/africapol.png",
        "images/maps/amnfis.png",
        "images/maps/amnpol.png",
        "images/maps/amsfis.png",
        "images/maps/amspol.png",
        "images/maps/asiafis.png",
        "images/maps/asiapol.png",
        "images/maps/eurofis.png",
		"images/maps/europol.png",
		"images/maps/ocean.png",
		"images/maps/pn.png",
		"images/maps/ps.png"
    );
    cargando();
}      
</script>

<style type="text/css">
body    {
    background: url('images/bases/back.png') 50% -100px fixed repeat ;
    font-family: Futura, Serif;
}
</style>
</head>
<body onload="ini()"> 
<div id="load" style="position:absolute; width:350px; height:150px; background-color: #0f0f0f; z-index:100000; top:175px; margin-left:50%; left:-175px; z-index:100000; display:ture"> 
	<p style="font-family: Futura, Helvetica, Arial, sans-serif; font-weight: 200; z-index:100002; color:#fff; top:0px; position:absolute; left:13px; width:324px;	height:124px;">Disculpen la espera.</p>
<div style="position:absolute; left:75px; top:100px; width: 200px; height: 20px; border: 1px;" >
	<div style="position:absolute; top: 0; left: 0; width:100%; height: 100%; background-color: #525064">
	</div>
	<div id="estate"
	style="position:absolute;  
		top: 0; left: 0; width: 1%; height: 100%; background-color: #1f0ec4" >
	</div>
</div> 

Muchas gracias.

[caricatos]

Hola:

Veo que usas librerías, y suelen programar el evento load...

Saludos

[lktmaster]

Y esto como lo puedo solucionar?

Supongo que te refieres al onLoad del body, he intentado poner un $(document).ready(ini...) pero se ha quedado petrificado.

[caricatos]

Hola:

Lo que yo hago cuando tengo más de una inicialización es, antes de inicializar, machacando lo que hubiese, guardo lo que existiese...

Código:

if (window.onload != undefined) {
 guardando = window.onload;
 window.onload = function() {
  guardando();
  ini();
 }
}
else
 window.onload = ini;

Saludos

[lktmaster]

Y como o donde añado ese codigo?

yo he probado así, y no funciona

Código HTML:

<script>
$(document).ready(function() {
if (window.onload != undefined) {
 guardando = window.onload;
 window.onload = function() {
  guardando();
  ini();
 }
}
else
 window.onload = ini; 
})
</script> 

supongo que no va tal qual así pero el codigo que te he puesto arriba és lo que yo estoy tocando, entiendo que hace tu codigo, mas o menos pero como aplicarlo ya si que no tengo ni idea.

Perdona y muchas gracias