Ocultar elementos hasta que la página termine de cargarse - usando jquery

Acabo de escribir un código simple para ocultar todos los elementos hasta que la página termine de cargarse y muestre un indicador mientras se carga ... (Funciona).Ocultar elementos hasta que la página termine de cargarse - usando jquery

así que lo que estoy pidiendo es saber si lo estoy haciendo bien y qué vas a sugerir.

HTML

<body> 
    <div class="loading"> 
     <img src="indicator.gif"/> 
    </div> 

    <div class="content"> 
     <!-- page content goes here --> 
    </div> 
</body>

jQuery

$(document).ready(function(){ 
     $(".content").hide(); 
    }); 

    $(window).load(function(){ 
     $(".loading").fadeOut("slow"); 
     $(".content").fadeIn("slow"); 
    });

Fuente

2011-09-13 Sam

Es posible que desee ocultar el div de contenido desde el principio para evitar cualquier parpadeo en la página dependiendo de lo que está siendo cargado en la página.

<body> 
    <div class="loading"> 
    <img src="indicator.gif"/> 
    </div> 

    <div class="content" style="display: none;"> 
    <!-- page content goes here --> 
    </div> 
</body> 


$(window).load(function(){ 
    $(".loading").fadeOut("slow"); 
    $(".content").fadeIn("slow"); 
});

Fuente

2011-09-13 09:50:15 njr101

good catch! eso tiene sentido. – Sam

una ligera mejora en este Javascript es utilizar una devolución de llamada en el desvanecimiento por lo que el fundido de entrada comienza cuando el desvanecimiento ha completado. Esto te da una transición mucho más suave.

<body> 
    <div class="loading"> 
    <img src="indicator.gif"/> 
    </div> 

    <div class="content" style="display: none;"> 
    <!-- page content goes here --> 
    </div> 
</body> 


$(window).load(function(){ 
    $(".loading").fadeOut("slow", function(){ 
    $(".content").fadeIn("slow"); 
    }); 
});

Fuente

2014-02-18 11:06:42 nidal

Ocultar elementos hasta que la página termine de cargarse - usando jquery

Respuesta

Cuestiones relacionadas