Preloading em página php

vpess

Power Member
Boas,

Peço a vossa ajuda para fazer um preloading para uma página em PHP.

Que quando carregasse a página, a página principal ficasse em segundo plano, e em primeiro plano ficasse uma pequena imagem a dizer que está a carregar.

Isso é possivel?


Cumps. Abraço.
 
Em php não estou a ver como fazer isso, mas podes sempre usar Flash ou JavaScript para fazer o "loading".
 
Exacto, mas como o coloco numa página php? Pode-m dar uma ajuda? o Preloading poder ser em javascript.

Cumps


arranjas o script em javascript e colocas-o dentro d página php desde que fique dentro das tags:
<script language="JavaScript" type="text/JavaScript">

preloading

</script>

e em alguns casos tem também de ser dentro das tags <head>..
 
arranjas o script em javascript e colocas-o dentro d página php desde que fique dentro das tags:
<script language="JavaScript" type="text/JavaScript">

preloading

</script>

e em alguns casos tem também de ser dentro das tags <head>..

O script já encontrei, mas queria coloca-lo de forma a qando estivesse a carregar a página aparecesse uma imagem de loading em primeiro plano e a página php em segundo plano.

Cumps
 
preloading de uma página

Viva

A maneira que eu vejo de fazeres isso é teres uma página inicial só com javascript com uma biblioteca tipo jquery e utilizando o plugin (acho que é) thickbox, que coloca-te o tal gif de loading.
Fazes a chamada ao thickbox num layer com z acima e de preferência com um background semi-transparente e uma chamada ajax para ires buscar o conteúdo do php e no OnComplete da chamada ajax, escreves por baixo (do semi-transparente - fica bacano!) e depois tiras o div do loading e ficas com a página por baixo.

Atenção que certos elementos de formulários bem como flash não consegues fazer isto do transparente e tal pq não ligam ao z-index.

Boa sorte.
 
Viva

A maneira que eu vejo de fazeres isso é teres uma página inicial só com javascript com uma biblioteca tipo jquery e utilizando o plugin (acho que é) thickbox, que coloca-te o tal gif de loading.
Fazes a chamada ao thickbox num layer com z acima e de preferência com um background semi-transparente e uma chamada ajax para ires buscar o conteúdo do php e no OnComplete da chamada ajax, escreves por baixo (do semi-transparente - fica bacano!) e depois tiras o div do loading e ficas com a página por baixo.

Atenção que certos elementos de formulários bem como flash não consegues fazer isto do transparente e tal pq não ligam ao z-index.

Boa sorte.

O problema é que não percebo nada de javascript nem ajax.

Não vai uma ajudinha?

Cumps
 
Preloading de php

Viva

Claro que vai!

Tutorial Javascript: http://www.javascript-tutorial.com.br/content-2.html
Jquery: www.jquery.com
ThickBox: www.jquery.com/demo/thickbox/
Tutorial Ajax: http://www.w3schools.com/Ajax/ajax_intro.asp
Ajax pelo JQuery: http://i18n.2kminterativa.com.br/jquery/jquery-getting-started-pt_br.html

Isto já são grandes referências que podes começar a pescar, como eu comecei, já há alguns anos. Se queres que pesque por ti, podes negociar um contrato de freelance!

Um abraço e boa sorte
 
Boas,

Já andei a tentar e ainda não consegui colocar o preloading.

Eu tenho o código que faz o carregamento da página,só que ele aparece na barra de estado.

Código:

PHP:
<SCRIPT language=VBScript>
   <!--
   Dim Bar, Line, SP
   Bar = 0 
   Line = "|"
   sP = 250
   
   Function Window_onLoad()
     Bar = 95
     sP = 10
   END Function
   
   Function Count()
   If Bar < 100 Then
      Bar = Bar + 1
      Window.Status = "A Carregar... " & Bar & "%" & " " & String(Bar, Line)
      setTimeout "Count()", SP
   Else
      Window.Status = "Concluido"
      Document.Body.Style.Display = "" 
   End If 
   End Function
   
   Call Count()
   -->
   </SCRIPT>


Alguem me pode ajudar a colocar uma imagem, um gif de loading, em primeiro plano enquanto carrega e a página principal em segundo plano???


Cumps.
 
Será?

Ora boas,

Não sei se é isto que queres mas cá vai!

Dentro do <head>
Código:
<script type="text/javascript">
<!-- Só para não mostrar no IE a barra quando não a queres!
function hideLoading() {
	document.getElementById('pageIsLoading').style.display = 'none'; // DOM3 (IE5, NS6) only
}
//  Finito!-->
</script>

No inicio do body
Código:
<!-- a barra começa aqui! -->
<div align="center" id="pageIsLoading" style=" position:absolute; height:100%; top:0;display:block; width:100%;background:none;padding:220px 0 10px 0;background: transparent;
background-color: #333333; z-index:10000; -moz-opacity:.8;opacity: .8; filter:alpha(opacity=80);">
<img src="carregar.gif" alt="A Carregar ..." />
</div>
<!--e acabou! -->
Nota: podes adicionar o teu texto a seguir à tag de Imagem ;) e não te esqueças de mudar o endereço caso mudes o nome &&/|| localização da imagem!

Finalmente, antes mesmo de fechares o body:
Código:
<script type="text/javascript">
if (window.addEventListener) {
	window.addEventListener('load', hideLoading, false);
} else if (window.attachEvent) {
	var r = window.attachEvent("onload", hideLoading);
} else {
	hideLoading();
}
</script>

Deve funcionar, pode não ser a última maravilha do mundo até porque é um código bem simples :lol: mas serve!
 
Ora boas,

Não sei se é isto que queres mas cá vai!

Dentro do <head>
Código:
<script type="text/javascript">
<!-- Só para não mostrar no IE a barra quando não a queres!
function hideLoading() {
    document.getElementById('pageIsLoading').style.display = 'none'; // DOM3 (IE5, NS6) only
}
//  Finito!-->
</script>

No inicio do body
Código:
<!-- a barra começa aqui! -->
<div align="center" id="pageIsLoading" style=" position:absolute; height:100%; top:0;display:block; width:100%;background:none;padding:220px 0 10px 0;background: transparent;
background-color: #333333; z-index:10000; -moz-opacity:.8;opacity: .8; filter:alpha(opacity=80);">
<img src="carregar.gif" alt="A Carregar ..." />
</div>
<!--e acabou! -->
Nota: podes adicionar o teu texto a seguir à tag de Imagem ;) e não te esqueças de mudar o endereço caso mudes o nome &&/|| localização da imagem!

Finalmente, antes mesmo de fechares o body:
Código:
<script type="text/javascript">
if (window.addEventListener) {
    window.addEventListener('load', hideLoading, false);
} else if (window.attachEvent) {
    var r = window.attachEvent("onload", hideLoading);
} else {
    hideLoading();
}
</script>

Deve funcionar, pode não ser a última maravilha do mundo até porque é um código bem simples :lol: mas serve!


Obrigadão, é isso tudo.
 
Back
Topo