How to put a loading image inside a JavaScript function?

Question

How to put a loading image inside a JavaScript function?

Navigation

#1 by (4 votes)
#2 by (4 votes)
#3 by (3 votes)

6

I have this function below:

function consultarOcorrencia(number, sequence){
    form = document.forms[1];

    form.number.value = number;
    form.sequencial.value = sequence;

    form.submit();

}

After submit , a Java Action is called.

@Override
    public ActionForward perform(ActionMapping mapping, ActionForm form, HttpServletRequest request,
                    HttpServletResponse response) throws ApplicationException, SystemException {

        MyForm myForm=  (MyForm ) form;

        MyDelegate.getInstance().cancel(myForm);

        return mapping.findForward("cancel");
    }

Is it possible that while the function is running, put a loading gif?

Like this:

This task can take up to 7 seconds.

javascript java

asked by anonymous 10.12.2015 / 17:27

3 answers

4

You can do this:

var loader = document.getElementById('loader');

loader.style.display = "block"; // Mostra o loader, utilize quando a função começar

setInterval(function() {
  loader.style.display = "none"; // Esconde o loader, utilize quando a função terminar de executar.
}, 9000);

#loader {
  display: none;
}

<img id="loader" src="http://blog.teamtreehouse.com/wp-content/uploads/2015/05/loading.gif">

10.12.2015 / 17:54

4

I use the following implementation:

var block = document.querySelector(".block");
var fazerRequisicao = document.getElementById("fazerRequisicao");

fazerRequisicao.addEventListener("click", function () {
  //bloquear tela antes de iniciar a requisição.
  block.classList.remove("hidden");

  var htmlRequest = new XMLHttpRequest();
  htmlRequest.open("GET", "http://apps.testinsane.com/rte/status/200/5", true);
  htmlRequest.addEventListener("readystatechange", function (event) {  
    if (htmlRequest.readyState == 4) {
      if (htmlRequest.status == 200) {
        alert("Requisição realizada com sucesso");
      } else {
        alert("Ocorreu um erro durante o processamento");
      }
      //desbloquer a tela ao termino da requisição.
      block.classList.add("hidden");
    }
  });
  htmlRequest.send();
});

.hidden {
  display: none; 
}
.block {
  background-color: rgba(1, 1, 1, 0.3);
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  box-shadow: inset 0px 0px 15px white;
  z-index: 1234567;
}

.block img {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  width: 128px;
  height: 128px;
  
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

@-ms-keyframes rotating {
  from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}

@-moz-keyframes rotating {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes rotating {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

@-o-keyframes rotating {
  from { -o-transform: rotate(0deg); }
  to { -o-transform: rotate(360deg); }
}

@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

<input id="fazerRequisicao" type="button" value="Fazer Requisição" />
<div class="block hidden">
  <img src="http://cdn.flaticon.com/svg/81/81948.svg"/>
</div>

In the example above, I'm performing an asynchronous (AJAX) request that takes 5 seconds, at the end of it the screen is unlocked.

In your case, you are performing a synchronous request, so it is not necessary to unblock the page (unless of course you cancel the request).

10.12.2015 / 20:39

Linux 32 or 64 bits? [closed] Difference italic and emphasis in HTML? [duplicate]

score 3 · Accepted Answer

You can do via ajax instead of submit, call your loading before ajax processing and then you hide it.

I advise you to use the BlockUI lib, very good and makes it much easier. BlockUI

In case you need to use submit, you can do a well-done, call the loading before submit (), so the printing is processing and this loading some when the submit completes and renders the new page. it would look like this

function consultarOcorrencia(number, sequence){
    //Aqui chama seu loading
    $.blockUI({ message: '<h1><img src="loading.gif" /> Aguarde...</h1>' });

    form = document.forms[1];

    form.number.value = number;
    form.sequencialAvaliacao.value = sequence;

    form.submit();

}