3

Visando o melhor desempenho no tempo de load do meu site eu queria fazer com que o banner da página de entrada fosse mais inteligente.

Para telas de até 1600px teria de ser carregado um banner mais simples, de menor qualidade e de menor tamanho lateral visto que não tem porque ser maior, mas para telas maiores que isso eu traria um banner com mais detalhes e de melhor resolução.

inserir a descrição da imagem aqui

Supondo que eu tivesse uma <img id="banner"> como poderia fazer essa jogada para alterar o src dinamicamente?

É comum isso acontecer nos sites hoje em dia?

1

2 Respostas 2

4

sim bastante normal. voce pode tratar em camadas de css ou js. Hoje em dia o js oferece muito suporte a resize de tela, com componentes em jquery ui. caso necessite alterar tamanho, bg e disposição de componente, sugiro que use o CSS da seguinte forma:

#div{
   width: 600px;
   position: relative;
   margin: 10px auto;
}
@media (max-width:960px){
#div{
     width: 450px;
     margin: 0; 
    }
 }
 @media (min-width:480px){
#div{
     width: 100%;
     margin: 0; 
    }
 }

assim poderá fazer espécies de "if" dentro do css para cada tamanho máximo ou mínimo de tela. sobrescrevendo apenas o que for alterar do css pardrão. Ferramentas como Bootstrap auxiliam a manipular elementos em tela com css base ja escrito e bastante responsivo aos tamanhos padrões de tela.

2

Se quiseres fazer em javascript:

// convém estar no onload da janela
window.onload = function()
{

  // primeiro tens de sacar a dimensão da janela
  // neste caso a área visível do browser
  var largura = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

  // depois é brincar com if's e colocar o banner que queiras:

  if(largura>=1600)
  {
    // mete o banner com mais detalhe
  } else {
    // mete o banner com menos detalhe
  }
} // fim do window.onload

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .