Site loading progress system

Asked

Viewed 3,560 times

4

Some sites like Walking Dead and Youtube has a system that appears on top when the page is loading and appears an image in GIF or CSS3 arrodeando on the side or a progress bar. What is the name of this system or how I can make it?

I’ve done a lot of research trying to find...

javascript jquery ajax
  • 1

    I was looking for something similar '-'

  • 1

    Check out this project: http://www.createjs.com/#! /Preloadjs

1 answer

7


In the example below, when loading the page home.html, it will execute the Ajax process. The ajaxStart (initiating the Ajax process) and the ajaxComplete (when Ajax ends) are the controls of all events that start and end the process. A divLoading is triggered in the ajaxStart and in the ajaxComplete I’m squeezing with it, giving you that effect you want.

home html.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Efeito na Página e Todas Requisições Ajax</title>

<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function Load(View){        
        $("#carregar").load(View);
    };
    $(document).ready(function(e) {
        $("#a1").click(function(e) {
           Load('page1.html'); 
        });
        //CHAMADO NO INICIO DA PÁGINA      
        Load('page1.html');
    });
    //EFEITO ESPERADO ...
    $(document).ajaxStart(function() {
        $("#divLoading").fadeIn(0);
    });
    $(document).ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
        $("#divLoading").fadeOut(1250);
    });

</script>

</head>
<body>
    <div style="display:none;" id="divLoading">
        <img src="ajax.gif" border="0" />
    </div>
    <div>
        <a href="javascript:" id="a1">Abrir</a>
    </div>
    <div id="carregar"></div>
</body>
</html>

page1.html

<h1>Pagina Link 1 - Page.html</h1>

References:

  • 2

    Very good, just make a few modifications.

Browser other questions tagged javascript jquery ajax

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