Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Fonte Link

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:

http://stackoverflow.com/questions/3535020/show-image-while-page-is-loadinghttps://stackoverflow.com/questions/3535020/show-image-while-page-is-loading

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:

http://stackoverflow.com/questions/3535020/show-image-while-page-is-loading

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

Edited
Link
Edson Cezar
  • 457
  • 1
  • 5
  • 21

Função Imagem de carregamento (GIF) em JavaScript?

Editado
Fonte Link
Edson Cezar
  • 457
  • 1
  • 5
  • 21

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:

http://stackoverflow.com/questions/3535020/show-image-while-page-is-loading

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.

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:

http://stackoverflow.com/questions/3535020/show-image-while-page-is-loading

edited
Fonte Link
Edson Cezar
  • 457
  • 1
  • 5
  • 21
Carregando
editado
Fonte Link
Edson Cezar
  • 457
  • 1
  • 5
  • 21
Carregando
Fonte Link
Edson Cezar
  • 457
  • 1
  • 5
  • 21
Carregando