4

Tenho uma página com um menu lateral, e o conteúdo desse menu é aberto dentro de um iframe.

CSS

#preloader {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background: #ccc;
    z-index: 9999;
}

ALBUM.PHP

<body>
  <div id="preloader"><img src="images/loading_azul.gif"></div>
    <div id="conteudo">
      ...

JS

$(document).ready(function(){
    //Esconde preloader
    $(window).load(function(){
        $('#preloader').fadeOut(1500); //1500 é a duração do efeito (1.5 seg)
    });
});

O problema é que só no final desse carregamento, ele mostra a animação do gif na tela, um pouco antes de ocultar.

LINK

Alguém sabe me dizer o porque?

13
  • O que faz a função carregando()? E onde está o HTML #carregando e #loading?
    – Sergio
    Commented 8/12/2014 às 18:31
  • O Html é esse: <div id="loading"><img src="images/loading.gif"></div>
    – Ricardo
    Commented 8/12/2014 às 18:38
  • Ok, e onde está ele? dentro do menu? iframe? Pode colocar o HTML completo? assim vamos estar a adivinhar...
    – Sergio
    Commented 8/12/2014 às 18:40
  • Ele está dentro da página album.php, que abre dentro do iframe, só não posto ela porque tem muitas linhas...
    – Ricardo
    Commented 8/12/2014 às 19:01
  • @Sergio editei a pergunta, veja se ficou mais claro.. Vlw!
    – Ricardo
    Commented 8/12/2014 às 19:04

1 Resposta 1

2

Ele só aparece pois você está carregando a página como um todo dentro de um iframe.

Ou seja, o gif só é carregado após a requisição terminar. Para resolver isso você tem que retirar esse gif da página de dentro do iframe e colocar no escopo da página que possui o menu.

E ainda por cima podia parar de usar iframe e usar pelo menos ajax para requisitar o conteúdo do iframe.

um simples $("div").load("url") resolveria o seu problema.

E então você poderia definir o aparecimento e desaparecimento do seu gif com um ajaxComplete e ajaxStart.

$( "meuMenu" ).click(function() {
   $( "suaDiv" ).load( "ajax/suapagina.html" );
});

em vez de iframe vc colocaria uma div e passaria a url que queria carregar nela para o método load do jquery.

e para mostrar e esconder o seu loading na hora certa

$.ajaxStart(function(){
    $('seuGif').show();
});

$.ajaxComplete(function(){
    $('seuGif').hide();
});

quando ocorrer um evento ajax na sua página, no caso o $.load, como eu exemplifiquei acima, o ajaxStart vai ser chamado, e quando a página terminar de carregar pelo ajax o ajaxComplete vai ser chamado escondendo o seu gif.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .