no funciona "cargando...."

destor77 · #1 (**permalink**) 07/10/2009, 13:35

Buenas, estoy intentando hacer el famoso "cargando...." pero no logro hacerlo andar como quiero, ahora lo único que haces es mostrarme el efecto siempre, y no desaparece ni me oculta toda la pagina. En que le estoy errando jeje

el codigo del js es:

Código javascripts:

Ver original$(document).ready(function(){
   $("#preloader").css("display","none");
   $("#wrapper").css("display","block");
});
$(function() {                  
            $("#dialog").dialog({
                bgiframe: true,
                autoOpen: false,
                resizable: false,
                height:140,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 0.5
                },
                buttons: {
                    'Si': function() {
                        var url =$('#delete').attr("href");                     
                        location.href=url;                      
                    },
                    'Cancelar': function() {
                        $(this).dialog('close');
                    }
                }
            });                    
 
            $('#delete').bind("click", function(){  
               $('#dialog').dialog('open');  
               return false;
            });  
            
            $('#mensaje').click(function(){               
                 $("#mensaje").slideUp();           
            });
            
            
});

mi css es:

Código css:

Ver original/* Basic  ---------------------------------------- */
 
.clear { clear: both; }
 
body {
    background: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #646464;
    text-align: center;
}
 
#wrapper {
    text-align: left;
    width: 930px;
    margin: 0 auto;
    display: none;
}
 
#preloader{                            
    top: 0; right: 10px;
    position:relative;
    z-index:10;
    width: 132px; height: 38px;
    background: url(../images/loading.gif) no-repeat;
    cursor: wait;
    text-shadow: 0px 1px 0px #fefefe;  //webkit 
                              
}

y mi html es:

Código html:

Ver original<?php
/**
 * header.php
 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Administración - Websa100</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<!-- CSS -->
<link href="<? echo CSS;?>transdmin.css" rel="stylesheet" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="<? echo CCS;?>ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="<? echo CS;?>ie7.css" /><![endif]-->
 
<!-- JavaScripts-->
<script type="text/javascript" src="<? echo JS;?>jquery.js"></script>
<script type="text/javascript" src="<? echo JS;?>jNice.js"></script>
 
<link type="text/css" href="<? echo CSS;?>ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />  
<script type="text/javascript" src="<? echo JS;?>jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<? echo JS;?>jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="<? echo JS;?>ui.dialog.js" ></script>  
<script type="text/javascript" src="<? echo JS;?>ui.core.js" ></script>  
<script type="text/javascript" src="<? echo JS;?>funciones.js" ></script> 
 
 
 
</head>
 
<body>
    <div id="preloader">Cargando... Espere Por Favor</div>
    <div id="wrapper">          
        <!-- h1 tag stays for the logo, you can use the a tag for linking the index page -->
        <h1><a href="#" title="Websa100"><span>Websa100</span></a></h1>

desde ya muchas gracias

JavierB · #2 (**permalink**) 07/10/2009, 13:58

Mensaje movido al foro de Frameworks desde Javascript.

Saludos,

mayid · #3 (**permalink**) 08/10/2009, 11:07

Proba en principio con esto otro:

$("#preloader").hide();

Pero va a estar muy poquito tiempo en pantalla porque document ready es muy veloz.

Un comentario fuera de tema: es mejor habituarse a usar la etiqueta <?php completa, en vez de solamente usar <?

destor77 · #4 (**permalink**) 09/10/2009, 09:11

hola mayid,
y hay forma de retrasar el efecto porque he notado que solo lo muestra cuando mando un formulario o entra a una seccion de mi pagina que demora en cargar, pero cuando son links simples que no tienen nada de peso no se ve el efecto.
Desde ya muchas gracias

mayid · #5 (**permalink**) 10/10/2009, 12:18

Podes retrasarlo con setTimeOut( foo , 5000);

Ej:

setTimeout('$("#telon").fadeTo(700,.1)',3000);

Esto dispara la funcion a los 3 segundos de haber empezado el document.ready. Ademas, el fade tarda .7 segs en ejecutarse.

destor77 · #6 (**permalink**) 12/10/2009, 09:55

Hola mayid,
perdón por molestarte de nuevo, pero el codigo que me has pasad no me funciona lo he puesto asi:

Código javascripts:

Ver original$(document).ready(function(){
   setTimeout('$("#wrapper")',3000);
   $(window).bind('load', function(){       
        $("#wrapper").css("display","block");   
        $("#preloader").css("display","none");
    });   
});

y me demora pero no me sale el efecto del preload estoy haciendo algo mal?

salu2 y gracias

mayid · #7 (**permalink**) 12/10/2009, 12:14

Y si, a simple vista estas pidiendo una demora antes de lanzar el loading. Es decir, tenes que hacer al reves: lanzar el loading antes de dar demora.

Ademas, esto no funciona asi:

Cita:

setTimeout('$("#wrapper")',3000);

$("#wrapper") es un selector. Y vos lo que tenes que poner ahi es una funcion a disparar.

Yo lo veo asi:

Cita:

$(document).ready(function(){

function retraso() {
$("#wrapper").css("display","block");
$("#preloader").css("display","none");
}

setTimeout('retraso()',3000);

});

Bind no tiene nada que hacer aca, porque no estas asignando multiples funciones a nada. Tenes que saber diferenciar entre funciones propiamente dichas, y simples sentencias.

Pd: si no te funciona el codigo con la funcion que te escribi, obviala:

Cita:

$(document).ready(function(){

setTimeout(' $("#wrapper").css("display","block"); $("#preloader").css("display","none");',3000);

});

Pero queda mucho mas lindo escribir algo estructurado que todo en un mismo renglon.

destor77 · #8 (**permalink**) 12/10/2009, 17:34

un millon de gracias mayid, al final la segunda opcion fue la que andubo, la primera el firebug me tiraba que no encontraba la funcion retraso, y quedaba siempre en el efecto loading, mañana con más tiempo veo de revisarla, pero necesitaba sacar el efecto urgente jajaja.
Si es verdad que mezclaba muchas cosas en el codigo, sobre todo porque estoy demasiado verde en jquery y no termino de comprender algunas cosas del core por ejemplo eso del "bind", pero con ejemplos es mas facil encontrarle la mano.
Muchisimas gracias nuevamente.

mayid · #9 (**permalink**) 12/10/2009, 18:12

En su momento, esta sentencia, que llama a una funcion, me tomo mucho trabajo:
setTimeout('retraso()',3000);

A veces por las comillas, o quizas por los parentesis. Siempre faltaba un poco para que funcionase. Asi que con tiempo te recomiendo trates de arreglar la llamada a la funcion retraso() por ejemplo sin usar parentesis o sin usar comillas. Pensa que en un futuro podes necesitar hacer un llamado a una funcion compleja, y mas vale escribirla aparte, no en un solo renglon.