Loading only appears after page loaded

Question

Loading only appears after page loaded

Navigation

#1 by (2 votes)

4

I have a page with a side menu, and the contents of this menu is opened inside 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 just at the end of this upload, it shows the animation of the gif on the screen, just before it is hidden.

LINK

Can anyone tell me why?

javascript html

asked by anonymous 08.12.2014 / 19:29

1 answer

How do I do the layout of an android app in Photoshop using PX if google just gives me DP? I can not hide SCM Music Player on Tumblr

score 2 · Answer 1

It only appears because you are loading the page as a whole into 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 it in the scope of the page that has the menu.

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

And then you could set 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 would pass the url you wanted to load into it for 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 ajax the ajaxComplete will be called hiding your gif