Loading only appears after page loaded

Question

Loading only appears after page loaded

Asked 10 years ago

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?

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

– Sergio

2014/12/08 at 18:31
This is Html: <div id="loading"><img src="images/loading.gif"></div>

– Ricardo

2014/12/08 at 18:38
Ok, and where is it? inside the menu? iframe? Can you put the full HTML? so we’ll be guessing...

– Sergio

2014/12/08 at 18:40
It is inside the album.php page, which opens inside the iframe, only not put it because it has many lines...

– Ricardo

2014/12/08 at 19:01
@Sergio edited the question, see if it was clearer.. Vlw!

– Ricardo

2014/12/08 at 19:04
It was even less clear :) So have a div <div id="conteudo"> that has the same ID as the iframe? <iframe id="conteudo"...

– Sergio

2014/12/08 at 19:09
I didn’t realize they had the same name?

– Ricardo

2014/12/08 at 19:10
Could be. Ids have to be unique. If not, I need even more code to help. JS and HTML...

– Sergio

2014/12/08 at 19:11
Blz, I’ll change and check if funf. Otherwise the night I try to send more details... vlw for now!

– Ricardo

2014/12/08 at 19:12
@Sergio, I edited the question and put the link to see what is happening

– Ricardo

2014/12/09 at 13:07
Let’s go continue this discussion in chat.

– Ricardo

2014/12/09 at 13:23
Ricardo, is working on Internetexplorer, but just missed set a better height. It does what you are qurendo. Test in other browsers.

– Lollipop

2014/12/09 at 15:07
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

– Ricardo

2014/12/09 at 15:33

Show 8 more comments

1 answer

Browser other questions tagged javascript html

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

by Renan Borges • **301** points · Answer 1 · 2014-12-15T19:56:08+00:00

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.