Mostrar GIF mientras afecto tabla mySQL

Bier · #1 (**permalink**) 02/05/2019, 11:19

tengo una página que debe procesar información de mySQL al entrar... Requiere 1 minuto.

Deseo mostrar al Usuario un GIF para informarle que debe esperar.

He intentado con diversas opciones y lo que hace es que:
1- Primero se afecta la Tabla, pero no despliego el GIF
2- Después que ya se afectó la Tabla, entonces se muestra el GIF

Deseo primero mostrar el GIF y luego afectar la tabla.

En Internet he visto decenas de Preloader, pero no logri resolverlo.

¿Alguien lo ha hecho?

Gracias.

Panino5001 · #2 (**permalink**) 03/05/2019, 09:02

Podrías apoyarte en un webworker javascript: https://developer.mozilla.org/es/doc...do_web_workers

1) Muestras la precarga
2) Llamas al webworker (en lugar de invocar un webworker js, invocarías a un php) y dejas seteado que al recibir un postMessage (onmessage), muestras la data que contenga.
3) Cuando el php realice el proceso, envías el postMessage a la página principal
4) Al recibir el postMessage muestras los datos recibidos y ocultas el loading.

tuadmin · #3 (**permalink**) 03/05/2019, 21:41

no seria mas sencillo usar AJAX, que primero tu pagina, solo Muestre el GIF de CARGANDO, cuando muestras ese GIF, hacer un AJAX con jquery a la URL PHP, y cuando la peticionalize osea el 1 minuto, muestre el contenido Capturado de AJAX a la pagina actual??

abimaelrc · #4 (**permalink**) 08/05/2019, 15:31

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>test</title>
    <style>
        .loading{
          position: fixed;
          left: 0px;
          top: 0px;
          width: 100%;
          height: 100%;
          z-index: 9999;
        }
    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $( "#loading" ).click(function( event ){
                event.preventDefault();
                $( "body" ).append( "<img src='http://primelinetools.com/pub/media/catalog/product/placeholder/default/ajax-loader02_4.gif' alt='loading...' class='loading' />" );
            });
        });
    </script>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#" id="loading">No me hago responsable si presiona aquí</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <article>
            <header>
                <h2>Article title</h2>
            </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut sollicitudin ex. Donec ornare blandit lorem in hendrerit. Morbi vestibulum turpis quis facilisis ultrices. Etiam posuere lobortis dui ac fringilla. Proin ultricies lorem suscipit augue tempor tempus. Donec vitae felis maximus, convallis sem et, auctor tellus. Cras facilisis magna nisi, id elementum nibh imperdiet eu. Sed placerat eget orci fringilla facilisis. Nullam sit amet sem mattis, vehicula purus vitae, faucibus erat. Aliquam fermentum imperdiet nunc ut rhoncus.</p>
 
            <p>Ut cursus non turpis sit amet varius. Phasellus pharetra porta justo, eu feugiat orci ultricies quis. Donec non ipsum tristique, maximus ante maximus, dictum mi. Etiam odio sem, ornare eu tortor viverra, fringilla congue lectus. Ut efficitur sapien dui, ac pharetra eros maximus nec. Vivamus vitae orci enim. Duis maximus a mauris et lobortis. Nunc eget nisl in dui lobortis eleifend at ac dui. Maecenas lobortis placerat pharetra. Nunc et molestie magna. Aenean bibendum urna sit amet quam posuere, euismod ultrices ipsum dapibus.</p>
 
            <p>Donec dapibus mollis tortor quis volutpat. In nec ex nec felis interdum pharetra. Sed nec fermentum massa. In vestibulum consectetur tortor. Vivamus nec erat et odio feugiat cursus eu fringilla quam. Duis urna ex, pretium in vehicula eu, condimentum id justo. Proin placerat, massa a cursus tristique, nibh ex lacinia dui, vel imperdiet nisi lacus eu dolor. Etiam vestibulum augue ullamcorper tellus venenatis dignissim. Aliquam sagittis vel tellus non feugiat. Etiam dapibus at risus at gravida. Donec placerat, dui id suscipit volutpat, tortor elit dictum purus, lacinia maximus arcu lectus non tortor. Ut eget dolor mi.</p>
 
            <p>Aliquam erat volutpat. Ut tincidunt consequat mauris, a lobortis metus posuere ut. Vivamus gravida venenatis porta. Proin imperdiet turpis eget orci tincidunt rutrum. Nam id vestibulum orci. Ut consequat odio sed pretium posuere. Maecenas condimentum nulla consequat sem rutrum fringilla. Ut eget orci facilisis, suscipit elit at, semper tellus. Cras porttitor augue arcu, fringilla pulvinar ligula sollicitudin sit amet. Duis placerat blandit dui, ut vehicula eros iaculis ut. Integer dictum magna quis semper congue. Proin in pharetra ligula. Phasellus vel lorem sit amet sem bibendum suscipit at id orci. In iaculis purus leo, non dictum nisl ultrices id.</p>
 
            <p>Maecenas sit amet augue consequat, gravida sapien id, bibendum neque. Nunc est ligula, interdum pellentesque ornare in, sagittis sit amet ligula. Vestibulum viverra est purus, quis posuere lacus auctor et. Maecenas posuere ante tempus nunc vulputate, et lacinia massa porttitor. Maecenas aliquam gravida porttitor. Donec quis maximus ex. Integer congue ipsum in lorem sagittis, sit amet sollicitudin lorem venenatis. Donec imperdiet, erat eu aliquam varius, velit ex eleifend arcu, sed pulvinar quam sapien non velit. Phasellus pharetra fermentum augue, ac auctor lorem ornare vel. Vivamus dapibus egestas diam, et suscipit risus varius sit amet. Etiam ornare tortor vel sollicitudin vehicula. Nunc pretium, dolor sit amet mollis volutpat, arcu erat consequat lorem, imperdiet condimentum dolor orci eu arcu. Sed massa ligula, fringilla non suscipit sit amet, aliquet in mauris. Vestibulum vitae dolor nisl. Nulla at lectus sagittis, vestibulum ex non, molestie tellus. Sed facilisis faucibus neque, a pellentesque sapien rutrum id.</p>
        </article>
 
    <footer>
        <p>algo debe ir aquí</p>
    </footer>
</body>
</html>