Estou tentando mostrar uma imagem de carregamento em minha páginas usando estas funções:
$(document).ready(function(){
$(".loading").hide();
$.unblockUI();
$(".menuLink").focus(function() {
$(this).addClass('link-menu-selected');
});
$(".menuLink").blur(function() {
$(this).removeClass('link-menu-selected');
});
});
$(window).bind('beforeunload',function(){
$(".loading").show();
$.blockUI({message: null});
});
function exportFile(){
$('.loading').hide();
$.unblockUI();
}
Mas, a imagem não aparece, ou seja, as páginas estão carregando corretamente sem exibir a imagem, alguém sabe o que estaria ocorrendo de errado, ou, se há outras maneiras de executar isso ?
Não aparece nenhum erro no console, coloquei ela em meu JS principal de carregamento, um JS único onde centralizo todas as minhas funções.
Existem outras formas de se fazer essa execução de uma maneira eficiente ?
Eu adiciono as seguintes "bibliotecas" também:
<script type="text/javascript" src="/sign/resources/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/sign/resources/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="/sign/resources/js/renderAjax.js"></script>
Adiciono isso há uma página de template, "header", que todas as páginas da minha aplicação utilizam:
<ui:composition template="/layout/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
Ou seja, queria fazer isso de uma maneira generalizada, de uma forma que todas as páginas da minha aplicação herdassem essa função "wait", exibindo assim essa imagem.
Quero fazer isso, mas não em php, em JSF2:
https://stackoverflow.com/questions/3535020/show-image-while-page-is-loading