Como fazer sua página pré-carregar antes de ser exibida

Escrito por kevin lee | Traduzido por fernando telles
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
 Como fazer sua página pré-carregar antes de ser exibida
O pré-carregamento auxilia os visitantes do site a desfrutarem páginas da web mais rápidas (Comstock Images/Comstock/Getty Images)

Com o avanço da tecnologia e as páginas da web sendo exibidas cada vez mais rapidamente, os internautas se acostumaram a ver os eventos acontecerem no momento em que solicitam. Por exemplo, se os visitantes do site clicarem em um botão chamado "Mostrar imagem", eles esperam que a imagem apareça instantaneamente depois do clique. Uma forma de garantir que isso aconteça é pré-carregando as imagens grandes presentes no site. Este pré-carregamento assegura que todos os objetos de uma página estejam prontos para serem usados quando o usuário acessá-los. Para fazer isso, basta adicionar algumas linhas de javascript ao seu código HTML.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra uma página HTML utilizando o bloco de notas ou um editor HTML.

  2. 2

    Cole o código abaixo na seção do corpo do documento:

    <img src="primeiraImagem.jpg" /> <img src="segundaImagem.jpg" /> <img src="terceriaImagem.jpg" />

    Este código cria três imagens. Substitua os três nomes - primeiraImagem.jpg, segundaImagem.jpg e terceiraImagem.jpg - com os nomes das imagens no seu disco rígido ou os endereços URLs das imagens na web.

  3. 3

    Localize a seção de script do documento e cole o seguinte código javascript:

    var preLoadedObjects = [ "primeiraImagem.jpg", "segundaImagem.jpg", "terceiraImagem.jpg" ];

    Este código cria um objeto chamado "preLoadedObjects". Este objeto contém os nomes de todas as imagens que você deseja pré-carregar. Substitua os três nomes indicados acima por aqueles que você usou na seção anterior.

  4. 4

    Cole o código a seguir abaixo do código mostrado anteriormente:

    for (var i = 0; i <= preLoadedObjects.length; i++) { var currentImage = new Image(); currentImage.src = preLoadedObjects[i]; }

    Este código é executado quando a página é carregada. Ele percorre cada item no objeto preLoadedObject, cria uma imagem e define atributo "src" da imagem para o local da imagem.

  5. 5

    Salve o documento e visualize-o em um navegador. O código javascript é executado e irá pré-carregar as imagens. Após as imagens serem carregadas, a página da web aparecerá.

Dicas & Advertências

  • O objeto preLoadedObjects mostrado neste exemplo contém três nomes de imagens. É possível adicionar mais imagens, conforme necessário, simplesmente adicionando novos nomes à lista. Separe cada nome com uma vírgula. Não coloque vírgula após o nome final.
  • Se você tiver imagens grandes e desejar que elas sejam pré-carregadas, considere exibir uma mensagem de "Carregando" na sua página, ou mostre aos visitantes do site alguma informação útil ou divertida. Isto irá impedi-los de ter que ver uma página em branco enquanto suas imagens carregam.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível