Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Un script para darle un preload al index

Estas en el tema de Un script para darle un preload al index en el foro de Frameworks JS en Foros del Web. ¿Alguien conoce un script para mostrar un mensaje de precarga mientras la web se muestra?. Tengo rato buscando y lo mejor que encontré fue uno ...
  #1 (permalink)  
Antiguo 22/01/2008, 09:21
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 20 años, 5 meses
Puntos: 832
Un script para darle un preload al index

¿Alguien conoce un script para mostrar un mensaje de precarga mientras la web se muestra?. Tengo rato buscando y lo mejor que encontré fue uno en Cristalab.com, pero éste trabaja con enlaces y no con la página principal. Otros que pude ver son algo antiguos, probé un par y no funcionan en Firefox.

Tengo una web que contiene sólo noticias externas, por lo cual la velocidad de la misma depende de lo que esos servidores tarden en cargar. Se imaginarán la latencia, unos 10 a 15 segundos. Desesperante para el usuario.
  #2 (permalink)  
Antiguo 22/01/2008, 09:50
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Re: Un script para darle un preload al index

Hola:

¡Qué tal Meta!

Normalmente el problema de las precargas está en el peso de las imágenes, y en ese caso me parece que lo mejor es no añadir más código, y evitar "descuadres" poniendo las dimensiones de esas imágenes con estilos (una solución sencilla y maravillosa), pero también había notado que respuestas de una base de datos también ralentizan la presentación de la página...

Algunas veces he dado esta respuesta, pero no estoy seguro de que sea la que te valga.

Se trata de poner una capa visible (display: block) con un gif animado de esos para la ocasión (algún relojito, currantes con palas, o máquinas... etc.) que aparezca centrado con estilos (y esa capa también debe ocupar toda la parte visible: width: 100%, height: 100%), y otra capa con el contenido, y con window.onload hacer el "cambiazo"...

#espera {
width: 100%;
height: 100%;
background: white url(espera.gif) no-repeat center center;
}

#principal {display: none;}

y el javascript:
function inicio() {
document.getElementById("espera").style.display = "none";
document.getElementById("principal").style.display = "block";
}
window.onload = inicio;

Tal vez si hubiera imagenes que ralentizacen más la carga poner una precarga de imágenes intermedia.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 26/01/2008, 16:52
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 20 años, 5 meses
Puntos: 832
Re: Un script para darle un preload al index

Gracias caricatos por tu respuesta. Probé tu solución y efectivamente responde a lo que solicité . No obstante, posteriormente me decidí por el script AJAX que mencioné al principio. Esto porque me permite la carga individual de los módulos según vayan conectándose con sus servidores. El problema es que la carga se efectúa sólo al hacer clic; lo ideal es que comiencen a cargarse directo (aunque luego el usuario actualice con un clic). El tutorial aparece aquí, pero de todas formas pego el script, publicado por dave73 en Cristalab.com:

Código PHP:
function NuevoAjax(){
        var 
xmlhttp=false;
        try{
                
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(
e){
                try{
                        
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }catch(
E){
                        
xmlhttp false;
                }
        }

        if(!
xmlhttp && typeof XMLHttpRequest!='undefined'){
                
xmlhttp = new XMLHttpRequest();
        }
        return 
xmlhttp;
}

function 
Cargar(url){
        var 
contenidopreloader;
        
contenido document.getElementById('contenido');
        
preloader document.getElementById('preloader');
        
//creamos el objeto XMLHttpRequest
        
ajax=NuevoAjax(); 
        
//peticionamos los datos, le damos la url enviada desde el link
        
ajax.open("GET"url,true); 
        
ajax.onreadystatechange=function(){
                if(
ajax.readyState==1){
                        
preloader.innerHTML "Cargando...";
                        
//modificamos el estilo de la div, mostrando una imagen de fondo
                        
preloader.style.background "url('loading.gif') no-repeat"
                }else if(
ajax.readyState==4){
                        if(
ajax.status==200){
                                
//mostramos los datos dentro de la div
                                
contenido.innerHTML ajax.responseText
                                
preloader.innerHTML "Cargado.";
                                
preloader.style.background "url('loaded.gif') no-repeat";
                        }else if(
ajax.status==404){
                                
preloader.innerHTML "La página no existe";
                        }else{
                                
//mostramos el posible error
                                
preloader.innerHTML "Error:".ajax.status
                        }
                }
        }
        
ajax.send(null);

No tengo ni idea de cómo habilitarle esa función. De tanto buscar en Google encontré algo sobre el readystate, pero no supe cómo modificar eso ni nada.
  #4 (permalink)  
Antiguo 30/01/2008, 04:44
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Re: Un script para darle un preload al index

¡Que tal, Meta!... estuve unos días fuera, y no pude continuar con el tema

La verdad es que probé hacer precargas con ajax, pero tratándose de mp3's y no me ha gustado el resultado: Música en la web, de todos modos me gusta el reto y voy a hacer unas pruebas y te cuento... supongo que tendré que plantear tanto enlaces como capas donde mostrar los resultados.

Por lo pronto voy a reportar el mensaje para que lo muevan a ajax y lo vean otros usuario.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 30/01/2008, 05:53
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 20 años, 5 meses
Puntos: 832
Re: Un script para darle un preload al index

Creo que la cosa está en ese Readystate, el cual al parecer soporta hasta 4 estados pero ni idea del tema.

Cita:
Por lo pronto voy a reportar el mensaje para que lo muevan a ajax y lo vean otros usuario.
Sí, el asunto dio un giro inesperado jeje.

De todas formas el script es muy bueno. Ya estoy adelantando la parte gráfica mientras eso se soluciona. En un rato subo el trabajo. Hasta le apliqué cajas arrastrables y todo
  #6 (permalink)  
Antiguo 30/01/2008, 09:24
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 9 meses
Puntos: 772
Re: Un script para darle un preload al index

Hola a todos.

Este mensaje estará mejor en el foro de AJAX Movido desde JavaScript.

Saludos,
  #7 (permalink)  
Antiguo 31/01/2008, 04:16
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Re: Un script para darle un preload al index

Hola otra vez:

¡Que tal Meta :

A partir de una tabla que tengo de citas, hice unas pruebas y creo que la cosa va bien... por ahora solo puse citas concretas, pero luego voy a ver si lo preparo aleatorio...
Fíjate en el código: http://www.caricatos.net/citas/metacortex.php

Tan solo puse un array de unos objetos que son una url y la capa donde debe mostrarse, y toqué muy poco los códigos que pusiste... solo carga una url a la vez.

Si no te sirve, o hay que retocar algo dame un aviso.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 31/01/2008, 13:03
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 20 años, 5 meses
Puntos: 832
Re: Un script para darle un preload al index

¡De lujo! . ¡Gracias hombre! Te pasaste jeje. Dame un rato, voy a desmenuzar eso y te muestro los resultados pronto.
  #9 (permalink)  
Antiguo 31/01/2008, 16:45
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Re: Un script para darle un preload al index

Cita:
Iniciado por metacortex Ver Mensaje
¡De lujo! . ¡Gracias hombre! Te pasaste jeje. Dame un rato, voy a desmenuzar eso y te muestro los resultados pronto.
¡Me encanta que te parezca bien!, y espero ver esos resultados (y le pongo otra marca al winchester ¡je, je! )...

Te comento que hice otras pruebas que se resumen en esta otra página: http://www.caricatos.net/citas/metacortex2.php, Je, el mismo nombre seguido de un 2... ¡vaya originalidad!... está la imagen de fondo, pero al poner tamaño a la capa contenedora, no me gustaron los resultados... pero en eso sé que no tendrás problemas (lo supongo).

Saludetes
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #10 (permalink)  
Antiguo 31/01/2008, 17:04
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 20 años, 5 meses
Puntos: 832
Re: Un script para darle un preload al index

Jeje, ya veo que le agregaste la imagen de preload . Me llama la atención que usaras un solo archivo php para los datos ¿Cómo le hiciste?.

Ya habrás notado que todos los estados permiten una imagen o texto distinto. Lo que ahora estoy haciendo es colocar el mismo enlace de carga a cada caja para que actualice independientemente. Ya verás, ya verás .
  #11 (permalink)  
Antiguo 31/01/2008, 17:13
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Re: Un script para darle un preload al index

Cita:
Iniciado por metacortex Ver Mensaje
...Me llama la atención que usaras un solo archivo php para los datos ¿Cómo le hiciste?.
¡No entiendo...! el archivo tiene un parámetro... ¡Ya me lo explicarás mejor!

Cita:
Iniciado por metacortex Ver Mensaje
Ya habrás notado que todos los estados permiten una imagen o texto distinto. Lo que ahora estoy haciendo es colocar el mismo enlace de carga a cada caja para que actualice independientemente. Ya verás, ya verás .
¡Je, je! Me tienes en (P)ascuas

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #12 (permalink)  
Antiguo 02/03/2008, 14:09
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 20 años, 5 meses
Puntos: 832
Re: Un script para darle un preload al index

Estoy de nuevo en las andadas con esto. Este "camión" no termina de arrancar . Al principio tenía una estructura distinta a la de tu ejemplo, pero al no funcionar fui despejandola hasta el punto de copiar/pegar tu código, sólo para verla trabajando... Nada de nada.

La diferencia es que estoy utilizando un sistema de cajas arrastrables (que por cierto la recomiendo. Fue el que elegí entre 11 o 12 "candidatos": Drag & Drop Sortable Lists). El asunto es que el script incluye un código que tengo entre las etiquetas head y es el siguiente:

Código PHP:
<script language="JavaScript" type="text/javascript"><!--
    var 
dragsort ToolMan.dragsort()
    var 
junkdrawer ToolMan.junkdrawer()

    
window.onload = function() {

        
junkdrawer.restoreListOrder("noticias")


        
dragsort.makeListSortable(document.getElementById("noticias"),
                
saveOrder)
    }

    function 
verticalOnly(item) {
        
item.toolManDragGroup.verticalOnly()
    }

    function 
speak(idwhat) {
        var 
element document.getElementById(id);
        
element.innerHTML 'Clicked ' what;
    }

    function 
saveOrder(item) {
        var 
group item.toolManDragGroup
        
var list = group.element.parentNode
        
var id = list.getAttribute("id")
        if (
id == null) return
        
group.register('dragend', function() {
            
ToolMan.cookies().set("organizar-" id
                    
junkdrawer.serializeList(list), 365)
        })
    }

    
//-->
</script> 
¿Será que ese window.onload = function() tiene lagún conflicto con el window.onload = inicio que escribiste?. Es lo que precariamente se me ocurre por ahora, porque de resto todo está casi igual.

Otra diferencia más o menos relevante es que en lugar de parámetros utilizo archivos separados. Al final fue lo más conveniente . Entonces la cosa quedó así:

Código PHP:
carga = new Array();

cargaActual 0;
carga[0] = new actua("../data/archivo1.php""capa1");
carga[1] = new actua("../data/archivo2.php""capa2");
... 
etc.

function 
inicio() {
    if (
cargaActual carga.length)    Cargar(carga[cargaActual].urlcarga[cargaActual++].capa);

Eso de "../" es porque el archivo Js del Ajax está en una carpeta "Js" y los archivos de datos en otra llamada "data". La estructura del directorio es algo como esto:

Código PHP:
-  Index.php // En éste se incluye el Script de arranque de las cajas arrastrables
-  Estilos.css
--  js
--  data
--  imagenes
--  lib 
  #13 (permalink)  
Antiguo 02/03/2008, 16:02
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Re: Un script para darle un preload al index

Cita:
Iniciado por metacortex Ver Mensaje
...
¿Será que ese window.onload = function() tiene lagún conflicto con el window.onload = inicio que escribiste?...
Cuando se hace una asignación o declaración y luego (más abajo) se usa la misma asignación (o declaración) debes pensar que lo que se hace es re-definir la variable o método... con los eventos se pueden añadir nuevos (addEventListener/attachEvent)...

Creo que una solución fácil y rápida sería concatenar 2 funciones en una tercera...

El function() de esa librería podría ser inicio1()... el que escribí podría ser inicio2(), y puedes crear uno inicios() que contenga los 2 anteriores:

Código:
function inicio1() {
  junkdrawer.restoreListOrder("noticias")
  dragsort.makeListSortable(document.getElementById("noticias"), saveOrder)
}
...
function inicios() {inicio1(); inicio2();}
window.onload = inicios;
Infórmanos de tus progresos.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #14 (permalink)  
Antiguo 03/03/2008, 05:36
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 20 años, 5 meses
Puntos: 832
Re: Un script para darle un preload al index

Gracias por ese dato de los inicios() ;). Lo aplicaré apenas termine con esto.

El script ya funciona perfecto. En algún lugar había dejado un paréntesis o coma de más y por eso se estancaba . Ahora anda fino.

Estuve casi toda la madrugada en esto. Al menos logré entender un poco más el script y saber por dónde vienen los disparos. Sin embargo me quedan dos dudas al respecto:

1.- Cada caja de noticias tiene un botón que quisiera habilitar para recargar los artículos individualmente ¿Cómo podría ser ese enlace teniendo en cuenta que cada caja necesita actualizarse individualmente?. La intención es que el usuario haga clic y sólo se recargue la caja que éste quiere, en lugar de recargarse todas.

2.- Noté la ausencia del preloader y de verdad lo necesito porque pienso asignarlo a un botón por razones de usabilidad, ya que me parece importante que el usuario esté al tanto del estado de carga, debido a lo que se tardan los servidores externos en devolver el resultado. Efectué una modificación para agregarlo y casi funciona :

Código PHP:
function Cargar(urlcapaprel){
var 
contenidopreloader;
contenido document.getElementById(capa);
preloader document.getElementById(prel);
ajax= new NuevoAjax(); 
ajax.open("GET"urltrue); 
ajax.onreadystatechange=function(){
        if(
ajax.readyState==1){
                
preloader.innerHTML "Cargando Servidor";
                
preloader.style.background "url('imagenes/ajax-loader.gif') no-repeat";
        }else if(
ajax.readyState==4){
                        if(
ajax.status==200){
                                
contenido.innerHTML ajax.responseText;
                                
preloader.innerHTML "Cargado";
                                
preloader.style.background "none";
                
inicio();
                        }else if(
ajax.status==404){
                                
preloader.innerHTML "La página no existe";
                        }else{
                                
preloader.innerHTML "Error:".ajax.status
                        }
                }
        }
        
ajax.send(null);
}  
function 
actua(urlcapaprel)    {
    
this.url url;
    
this.capa capa;
    
this.prel prel;
}


carga = new Array();

cargaActual 0;
carga[0] = new actua("data/aporrea.php""capa1""prel1");
carga[1] = new actua("data/mundial.php""capa2""prel2"); 
Seguramente el error está en cómo puse la función. Creo que el "prel" está mal declarado (después de carga[].capa):
Código PHP:
function inicio() {
    if (
cargaActual carga.length)    Cargar(carga[cargaActual].urlcarga[cargaActual++].capacarga[cargaActual++].prel);
}
window.onload=inicio
Supongo que ese ++ es un post incremento como en php, pero de javascript no me pregunten porque estoy bajo cero . Si es así, veo que carga[].url tiene un valor y carga[].capa se incrementa a 1. Estuve buscando la manera de incrementar carga[].prel a 1+1 y no lo logré ¿Es esa la solución?.
  #15 (permalink)  
Antiguo 03/03/2008, 05:58
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Re: Un script para darle un preload al index

Hola:

Ya voy a "papear", así que te doy una respuesta rápida a una parte concreta de tu problema: el uso de ++...

Es un simple incremento que funciona igual en todos los lenguajes modernos (php, pascal, javascript, c...) e incrementa el valor de la variable antes o después de usarla (ya sea poniéndolo antes o después de la misma), o sea que si la misma variable la vas a usar varias veces, debes considerar que debes ponerlo en la primera aparición al principio para usarla incrementada. o en la última aparición al final, para usarla y luego incrementarla... pero si la pones (parece que es el caso) 2 veces... entonces lo que tienes son 2 valores consecutivos...

Luego me fijo con más atención.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #16 (permalink)  
Antiguo 03/03/2008, 16:59
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Re: Un script para darle un preload al index

Hola:

En principio el inicio sería:

Código:
function inicio() {
    if (cargaActual < carga.length)    Cargar(carga[cargaActual].url, carga[cargaActual].capa, carga[cargaActual++].prel);
}
window.onload=inicio;
Fíjate que borré los primeros "++".

Sobre poner botones individuales, creo que bastaría con llamar al método cargar con los 2 índices (en este caso concreto)... 0 y 1... más o menos:

<button onclick="Cargar(carga[0].url, carga[0].capa, carga[0].prel)" >
carga 0
</button>

<button onclick="Cargar(carga[1].url, carga[1].capa, carga[1].prel)" >
carga 1
</button>

Por lo que he visto nos podemos despreocupar de la llamada al método inicio() que se hace en Carga() ya que hay una variable que abortaría un supuesto bucle (creo que puedes olvidarte de este párrafo)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #17 (permalink)  
Antiguo 09/03/2008, 19:40
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 20 años, 5 meses
Puntos: 832
Re: Un script para darle un preload al index

Hola caricatos: No había respondido al post porque estaba dando tiempo para llegarte con una buena noticia este fin de semana, pero se me trancó el serrucho con esto . Los problemas anteriores se solucionaron y surgieron otros nuevos. Creo que el desarrollo de este sitio tendrá un proceso más largo de lo planeado. A ver qué surge en los próximos días. Gracias amigo.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:50.