Pergunta

Eu tenho um botão que define window.location para um arquivo PHP que gera um feed que é então descarregado. No entanto, como os arquivos variam em tamanho devido ao que os dados são colocados na alimentação que por vezes pode demorar um pouco a partir do clique do botão da janela de ficheiros aparecendo.

O que eu gostaria de ser capaz de fazer é clicar no botão e exibir uma loading.gif até que o diálogo / arquivo está completo.

Todas as idéias seria legal!

Felicidades

Foi útil?

Solução

Apenas fazer a imagem roteiro programa de geração de RSS você quer (HTML a imagem de saída, então o buffer de saída flush e iniciar a geração de dados). No final da geração de dados fazer:

<?php
print '<script>window.location = "http://www.newlocation.com"</script>'

Isso é tudo.

Outras dicas

Eu não estou realmente certo porque você precisa verificar o tamanho do arquivo em tudo? Se você usar ajax para fazer dinamicamente o get / post, e tudo que você está fazendo é tentando mostrar um ícone de carregamento enquanto isso está acontecendo, seu bastante simples de vomitar um indicador de atividade assíncrona. Por exemplo, com jQuery:

$("#loading").ajaxStart(function(){
   $(this).show();
});

$("#loading").ajaxStop(function(){
   $(this).hide();
});

$("#feeds").load("feeds.php?id=89734258972347895");

O código acima define um objeto DOM com id "carga" para mostrar e ocultar quando qualquer pedido assíncrono foi iniciado e interrompido. .load (url) carrega o conteúdo da URL no #feeds DIV. Se você estiver configurando o conteúdo-disposição: cabeçalho do anexo com php, ele iniciará automaticamente uma janela de download de arquivo, mesmo que ele tenha sido carregado de forma assíncrona em um div. Isso também é possível sem jquery é claro, há apenas um monte de javascript compatibilidade do navegador e não é tão fácil como simplesmente assinando os eventos ajaxStart e ajaxStop para mostrar e ocultar o seu carregamento img.

Josh

Antes de definir window.location você pode exibir uma div oculta com o seu gif

É a velha escola, mas isso pode ser feito muito facilmente com servidor push

<?php
  $separator = "end_of_section_marker";
  header('Content-type: multipart/x-mixed-replace;boundary=$separator');
  print "\n--$separator\n";
  print "Content-type: text/html\n\n";
  // Send placeholder message here
  print "--$separator\n";
  ob_flush();
  flush();
  // Start long processing here
  print "Content-type: text/html\n\n";
  // send data here
  print "--$separator--\n";
?>

Basta ajustar os tipos de conteúdo para os dados que você está enviando. $ Separador pode ser qualquer valor, desde que ele não aparece no sendo enviados dados.

Um método que eu usei nas obras passadas como este ...

  • Set window.location para uma página carregar, e passar a página de destino na querystring. O carregamento da página deve exibir um GIF animado ou o que você preferir para demonstrar que o processamento está ocorrendo. O carregamento da página deve imediatamente redirecionar para a página de destino aprovada na querystring (juntamente com quaisquer outros parâmetros querystring aplicáveis).

EDIT: O carregamento da página deve redirecionar para a página de destino usando javascript (conjunto window.location para o URL fornecido na querystring). Este é um ponto importante, porque se você redirecionar no lado do servidor da página de carregamento não serão exibidos.

EDIT 2: Se o seu carregamento da página é um arquivo php, você pode verificar o tamanho do arquivo a-ser-baixado e exibir um tempo estimado de download para o usuário (junto com um GIF animado "carregamento"), ou outros enfeites.

  • A página de destino deve render com tamponamento habilitado (chamada ob_start () antes de processar qualquer conteúdo). Com buffer ativado, nada é enviado para o navegador até que toda a página é processada. Enquanto isso o seu carregamento da página a partir do passo 1 continuará a ser exibido.

Você terá que usar AJAX para se comunicar com o servidor para descobrir o tamanho exato do arquivo que você está baixando. Então você tem algo a prova contra. Não há nenhuma maneira de saber o tamanho da carga útil esperada a partir de apenas lado do cliente.

É possível para você usar um iframe para carregar o feed e, em seguida, verificar o readyState do iframe / documento usando um intervalo? Assim, o processo seria:

  • Carregar uma janela contendo um iframe de largura e altura de 100% e uma loading.gif sobre o iframe.
  • Definir um temporizador de verificação de propriedade iframe.contentWindow.document.readyState
  • Uma vez readyState == completa, mostrar a salvar diálogo de arquivo.

Uma desvantagem é, para a maioria dos navegadores o arquivo PHP precisaria estar no mesmo domínio (no IE você pode apenas verificar a propriedade readyState do iframe).

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top