Início > Programação > Como Fazer o Pré-carregamento de Imagens com Javascript

Como Fazer o Pré-carregamento de Imagens com Javascript

Os navegadores carregam as imagens após um pedido de recurso HTTP através da tag img ou de uma chamada de método. Se uma imagem for muito grande ou se sua conexão coma Internet for lenta, o download do recurso demorará. Para minimizar o tempo de acesso ao recurso, os navegadores armazenam as imagens em seus caches locais, mas ainda assim há o tempo do primeiro acesso.

Pré-carregamento de imagens é uma técnica que visa baixar e adicionar a imagem ao cache do navegador antes que ela seja necessária para que sua apresentação seja instantânea quando ela for acessada. Há várias formas de fazer o pré-carregamento, mas vamos utilizar o objeto Image() do Javascript para alcançar esse objetivo. Descobri essa técnica nesse link. Basta instanciar um objeto Image() passando a URL da imagem. O ideal é utilizar um array de Image para pré-carregar cada uma das imagens necessárias:

<html>
   <head>
   <script language = "JavaScript">
   
      var images = new Array();
   
      function preload() {
         images[0] = new Image();
         images[0].src = "img/imagem_01.gif";
         images[1] = new Image();
         images[1].src = "img/imagem_02.gif";
      }

      preload();

   </script>
   </head>
   <body>
      <img src="' + images[0].src + '" alt="imagem 01">
      <img src="' + images[1].src + '" alt="imagem 02">
   </body>
</html>

Anúncios
  1. Nenhum comentário ainda.
  1. No trackbacks yet.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: