0

Nesecito mostrar un loader,div o imagen mientras se carga el codigo php

pagina home.php

<form method="get" target="_blank" action="pagina2.php">
<input type="text" name="inputuno"></input>
 <input type="text" name="inputdos"></input>
 <input type="submit" value="envia"></input>
</form>       

pagina pagina2.php

$variableuno=$_GET['inputuno'];
$variabledos=$_GET['inputdos'];
//loop mysqli;
<html> resultados consulta </html>
4
  • Probe con jquery y no me funciona , primero se ejecuta el codigo php y despues muestra el loader. el 15 may. 2019 a las 15:44
  • el codigo php no carga ... se ejecuta ...
    – user46896
    el 30 jul. 2022 a las 15:29
  • eso pasa por que estan haciendo las cosas a lo mejor en un orden incorreto; normalmente utilizamos single page aplication (SPA) para las pagias web, pero contanos mas, esto ocurre al cargar por primera vez tu pagina o cuando entra a cierto anchor???
    – user46896
    el 30 jul. 2022 a las 15:32
  • lo haces con ajax o que ???
    – user46896
    el 30 jul. 2022 a las 15:33

3 respuestas 3

0

Puedes crear un contenedor donde va a estar tu imagen.

<body class="login">
    <div class="loading"></div> 
    ...
</div>

luego a la clase del contenedor le agregas la imagen y propiedades necesarias:

> .loading  {
>     position: fixed;
>     left: 0px;
>     top: 0px;
>     width: 100%;
>     height: 100%;
>     z-index: 9999;
>     background: url('Images/loading_2.gif') 50% 50% no-repeat rgb(249,249,249);
>     opacity: .8; }

después con jquery, ocultas la imagen, cuando toda la pagina cargue.

  $(window).load(function () {
             $(".loading").fadeOut("slow");
   });

tener presente, que la imagen es la primera que se muestra, y lo que hacemos es ocultarla con jquery cuando la pagina termina de cargar.

2
  • Gracias Sergio por tu respuesta pero no me funciona ya probé , y el php se ejecuta antes y después muestra el loader osea tarda 30 segundos en cargar que es lo que demora las consultas sql el 15 may. 2019 a las 16:19
  • me parece que a la pregunta le faltan detalles para dar una respuesta.
    – user46896
    el 30 jul. 2022 a las 15:33
0
$.ajax({type: 'POST', url: "url",
        data: {key:value},
        beforeSend: function (xhr) {
            // hacer lo que sea antes de que termine request
        },
        success: function (data, textStatus, jqXHR) {
            //al finalizar el request
        },
        error: function (jqXHR, textStatus, errorThrown) {
            //en caso de error
        }
    });

puedes consultar la documentacion de beforeSend y ajax de jquery aqui

3
  • Gracias javier , ahora veo la documentacion y cualquier cosa vuelvo a comentar!! el 15 may. 2019 a las 20:49
  • 2
    a mi me va de maravilla, solo que es codigo un poco viejo, JQuery va de salida. el 15 may. 2019 a las 20:55
  • me parece que a la pregunta le faltan detalles para dar una respuesta.
    – user46896
    el 30 jul. 2022 a las 15:33
0

Puedes usar ajax para hacer la petición al servidor web y al iniciar la petición mostrar el loading y al terminar la petición ocultar el loading.

<script>
    var divCargando = document.getElementById('cargandoDiv');

    $( document ).ajaxSend(function() {
      divCargando.show();
    });

    $( document ).ajaxComplete(function() {  
      divCargando.hide();
    });
</script>

con ese código logras que cada peticion ajax que hagas se muestre el loading y se oculte cuando se termine.

Luego, necesitas hacer el submit a traves de $.post() o $.get() y no a traves del submit del formulario.

esto es un ejemplo generico

$("button").click(function(){
    $.get("pagina2.php", function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
}); 
3
  • Tenes algun ejemplo Rodolfo? el 15 may. 2019 a las 20:43
  • actualice la respuesta con alguna guía de lo que puedes hacer el 15 may. 2019 a las 21:04
  • me parece que a la pregunta le faltan detalles para dar una respuesta.
    – user46896
    el 30 jul. 2022 a las 15:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.