Loading only appears after page loaded

Asked

Viewed 958 times

4

I have a page with a side menu, and the contents of this menu is opened within an 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)
    });
});

The problem is that only at the end of this load, it shows the animation of the gif on the screen, just before hiding.

LINK

Can anyone tell me why?

javascript html

  • What makes the function carregando()? And where is the HTML #carregando and #loading?

  • This is Html: <div id="loading"><img src="images/loading.gif"></div>

  • Ok, and where is it? inside the menu? iframe? Can you put the full HTML? so we’ll be guessing...

  • It is inside the album.php page, which opens inside the iframe, only not put it because it has many lines...

  • @Sergio edited the question, see if it was clearer.. Vlw!

  • It was even less clear :) So have a div <div id="conteudo"> that has the same ID as the iframe? <iframe id="conteudo"...

  • I didn’t realize they had the same name?

  • Could be. Ids have to be unique. If not, I need even more code to help. JS and HTML...

  • Blz, I’ll change and check if funf. Otherwise the night I try to send more details... vlw for now!

  • @Sergio, I edited the question and put the link to see what is happening

  • Let’s go continue this discussion in chat.

  • Ricardo, is working on Internetexplorer, but just missed set a better height. It does what you are qurendo. Test in other browsers.

  • Rafael, it’s true I was only seeing in Firefox. In Chrome it seems that it’s round too... I’ll change the height yes, you can leave! Vlw

Show 8 more comments

1 answer

2

It only appears because you are loading the page as a whole within an iframe.

That is, the gif is only loaded after the request is finished. To solve this you have to remove this gif from the page inside the iframe and put in the scope of the page that has the menu.

And on top of that you could stop using iframe and use at least ajax to request the contents of iframe.

a simple $("div"). load("url") would solve your problem.

And then you could define the appearance and disappearance of your gif with an ajaxComplete and ajaxStart.

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

instead of iframe you would put a div and pass the url you wanted to load to it to the jquery load method.

and to show and hide your loading at the right time

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

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

when an ajax event occurs on your page, in the case of $.load, as I exemplified above, ajaxStart will be called, and when the page finishes loading by ajax the ajaxComplete will be called hiding your gif.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.