Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite,
Gostaria de ajuda para criação de uma galeria de imagens.
O site referente é o mineraçãogalvao.com.br > Menu > Fotos.
O site é dividido por frames, e o carregamento das fotos no
frame principal do site apresenta: navegação/scroll lento, algumas
imagens não carregam e pelo celular da erro, nem chega a carregar.
o codigo referente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fotos Mineração Galvão</title>
</head>
<body>
<table border="0" align="center" cellpadding="0" cellspacing="10">
<tr>
<td><a href="imagens/mineracao_galvao/1.jpg" target="_blank"><img src="imagens/mineracao_galvao/1.jpg" width="300" height="200" /></a></td>
<td><a href="imagens/mineracao_galvao/2.jpg" target="_blank"><img src="imagens/mineracao_galvao/2.jpg" width="300" height="200" /></a></td>
<td><a href="imagens/mineracao_galvao/3.jpg" target="_blank"><img src="imagens/mineracao_galvao/3.jpg" width="300" height="200" /></a></td>
</tr>
<tr>
<td><a href="imagens/mineracao_galvao/4.jpg" target="_blank"><img src="imagens/mineracao_galvao/4.jpg" width="300" height="200" /></a></td>
<td><a href="imagens/mineracao_galvao/5.jpg" target="_blank"><img src="imagens/mineracao_galvao/5.jpg" width="300" height="200" /></a></td>
<td><a href="imagens/mineracao_galvao/6.jpg" target="_blank"><img src="imagens/mineracao_galvao/6.jpg" width="300" height="200" /></a></td>
</tr>
<tr>
<td><a href="imagens/mineracao_galvao/7.jpg" target="_blank"><img src="imagens/mineracao_galvao/7.jpg" width="300" height="200" /></a></td>
<td><a href="imagens/mineracao_galvao/8.jpg" target="_blank"><img src="imagens/mineracao_galvao/8.jpg" width="300" height="200" /></a></td>
<td><a href="imagens/mineracao_galvao/9.jpg" target="_blank"><img src="imagens/mineracao_galvao/9.jpg" width="300" height="200" /></a></td>
</tr>
<tr>
<td><a href="imagens/mineracao_galvao/10.jpg" target="_blank"><img src="imagens/mineracao_galvao/10.jpg" width="300" height="200" /></a></td>
<td><a href="imagens/mineracao_galvao/11.jpg" target="_blank"><img src="imagens/mineracao_galvao/11.jpg" width="300" height="200" /></a></td>
<td><a href="imagens/mineracao_galvao/12.jpg" target="_blank"><img src="imagens/mineracao_galvao/12.jpg" width="300" height="200" /></a></td>
</tr>
<tr>
<td><a href="imagens/mineracao_galvao/13.jpg" target="_blank"><img src="imagens/mineracao_galvao/13.jpg" width="300" height="200" /></a></td>
<td><a href="imagens/mineracao_galvao/14.jpg" target="_blank"><img src="imagens/mineracao_galvao/14.jpg" width="300" height="200" /></a></td>
<td><a href="imagens/mineracao_galvao/15.jpg" target="_blank"><img src="imagens/mineracao_galvao/15.jpg" width="300" height="200" /></a></td>
</tr>
<tr>
<td><a href="imagens/mineracao_galvao/16.jpg" target="_blank"><img src="imagens/mineracao_galvao/16.jpg" width="300" height="200" /></a></td>
<td><a href="imagens/mineracao_galvao/17.jpg" target="_blank"><img src="imagens/mineracao_galvao/17.jpg" width="300" height="200" /></a></td>
<td><a href="imagens/mineracao_galvao/18.jpg" target="_blank"><img src="imagens/mineracao_galvao/18.jpg" width="300" height="200" /></a></td>
</tr>
<tr>
<td><a href="imagens/mineracao_galvao/19.jpg" target="_blank"><img src="imagens/mineracao_galvao/19.jpg" width="300" height="200" /></a></td>
<td><a href="imagens/mineracao_galvao/20.jpg" target="_blank"><img src="imagens/mineracao_galvao/20.jpg" width="300" height="200" /></a></td>
<td><a href="imagens/mineracao_galvao/21.jpg" target="_blank"><img src="imagens/mineracao_galvao/21.jpg" width="300" height="200" /></a></td>
</tr>
</table>
</body>
</html>Sou iniciante mas espero que me ajudem.
Att,
Matheus Gurgel.
Show Anderson ...
Vou tentar fazer os ajustes aqui..
Obrigado pela dica, retorno com alguma resposta.
Beleza!!
Boa tarde,
Então, fiz alguns ajustes no site,
reduzi o numero de imagens na seção Fotos e
dividi a seção em sub-paginas... melhorou bastante a navegação.
Porem, ainda estou com problema para acesso pelo celular,
Meu aparelho é um iPhone 6S, e não carrega nem a pau.
O safari ainda tenta recarregar a pagina algumas vezes
mas o erro persiste e o safari apresenta uma pagina como se
o link estivesse quebrado.
Acho que meu problema esta no redimensionamento/renderização das fotos
no aparelho. Uma unica vez q consegui carregar a pagina e fui
tentar dar zoom pelo aparelho acabou ocorrendo o erro e fui redirecionado
para pagina "quebrada".
Estou utilizando esta meta no index.php porem já tentei coloca-la em todas as paginas
mas não funcionou, código:
<meta name="viewport" content="width=device-width, user-scalable=no" />
Continuo achando que é pelo mesmo problema...
Cada imagem tem mais de 1MB. Você vai ter que diminuir isso.
Utilizando o site abaixo, consegui diminuir a primeira imagem de 1,17MB para 56KB.
Putz .. Mal minha,
esqueci de mencionar,
eu ja havia utilizado um site de compressão de imagem,
a original tem 9,7MB reduzi pra 1MB..
Vou tentar neste que vc me enviou.
Diminui a resolução também... na galeria você está exibindo em 300x200... deixe elas desse tamanho e só mostre a imagem grande quando o usuário clicar nela.
Valeu Anderson,
Este site que você me passou tem muito mais opção do que o eu utilizei.
Fiz nas 6 primeiras fotos aqui e ja deu certo, vou continuar para as outras.
Obrigado!!!
Beleza!! :P
Olá!
Isso está acontecendo porque as imagens são GIGANTES!!!!! :P
São 22 imagens, com um total de 35,6MB! Por isso demora e trava tanto.
Para resolver, você vai ter que comprimir as imagens. Tem vários sites e softwares que fazem isto:
https://www.google.com.br/search?q=image+compress
Também é interessante você usar imagens com resolução menor na lista de fotos (ou seja, usar thumbnail = miniatura), e só exibir em tamanho original quando o usuário clicar na foto (no img src você usa a miniatura e no a href você usa em tamanho original). Isto vai deixar o site ainda mais leve.
Outra coisa que você pode fazer é utilizar lazy load:
https://www.google.com.br/search?q=javascript+lazy+load