Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

lili_france

Site sempre carrega após o destaque em carousel

Recommended Posts

Certamente vocês estão familiarizados com o layout que possui de início uma imagem destaque, geralmente em carousel.

 

Toda vez que acesso a url do site, o mesmo carrega abaixo do destaque. Sabem quando o navegador entende que você estava lendo a página de um certo ponto e quando recarrega a página ele abre no ponto que você parou? É basicamente isso.
Quando recarrego o site com Ctrl+F5 ele abre normalmente, mas pela URL ou F5 ele só carrega assim.

 

Nas internas (que também possui imagem destaque) ele faz o mesmo, porém coloquei âncoras nelas e o link no menu ficou com "#start" mascarei a URL com o "#" em javascript, como solução temporária. Só assim ele carrega no início, onde deixei a âncora.

 

O site que desenvolvi, possui bootstrap e é em Wordpress.

 

Desde já, obrigada.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Lili,

Essa é uma condição natural dos browsers. Existem dois tipos de refresh num browser se eu não me engano e é ai que vem a diferença deles.

  • Refresh: Vai recarregar a página, mas vai deixar salvo os atributos. (onde esteve, o que estava escrevendo num formulário...).
  • Force Refresh: Vai recarregar a página e limpar todos os atributos salvos (isso pode incluir o cache também).

Quanto ao mascarar o # com javascript, qual seria a necessidade? Você está criando uma requisição pra esconder um atributo de um anchor? Se o site é one-page, não precisa se preocupar em deixar ele como: meusite.com.br/contato. O usuário vai saber que é one-page depois que acessar e saberá onde está o formulário de contato.

Abraços!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mas aí é que está: ninguém parou após o destaque. Ele só abre o site após o destaque quando ninguém parou ali, seja na página inicial ou em qualquer interna.

 

Mascarei porque no menu o link ficou "site.com.br/dicas#start", daí coloquei uma div no iniciozinho da página de ID "start", então mascarei só o "#start". Essa foi a forma que solucionei nas internas. Mas ao acessar o site pela URL não encontrei solução.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Lili,

O site já está em produção ou local? Se estiver em produção, envie o link que fica mais fácil de analisar. Tente fazer o seguinte teste...

  • Remova o script do anchor (de remover o #).
  • Vá até a sua página site.com.br/dicas.
  • Veja onde foi parar o seu scroll.

Normalmente ele pode cair fora da sua imagem em destaque, pois existe alguma condição de anchor na URL redirecionando-o para tal.

Obs.: Não se esqueça de realizar testes como: Ir removendo scripts um por um. Ir removendo folhas de estilos uma a uma... Alguns desses atributos podem influenciar no mal funcionamento da página. Veja também através do Inspecionar Elemento se o site dá algum erro.

Abraços!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu só coloquei a âncora depois de constatado o problema. Ela foi a solução temporária que encontrei pras páginas internas, não problema. Sem o script, ele vai para abaixo do destaque, como já mencionei. O script só faz com que na interna ele vá para o inicio.

 

Eu estava evitando colocar a URL, mas vejo que só vai dar pra entender acessando mesmo, então é terradouradarn.com.br

Compartilhar este post


Link para o post
Compartilhar em outros sites

Lili,

É claro que isso não é uma condição comum do browser e muito menos do HTML/CSS/JS. O que pode ter acontecido é:

  • Estruturado de forma incorreta o HTML.
  • Estruturado de forma incorreta o CSS.
  • Plugins em excesso.
  • JS estruturado incorretamente...

Sempre que dou refresh, a animação do ônibus é a primeira a ser executada e quando ela começa a se mover, o scroll é automaticamente redirecionado para baixo. Se esse é o fator principal? Não faço ideia.

Fiquei dando debug no seu site, existem estilos recalculados, estilos inválidos, duplicação da API do Google Maps (que talvez estejam conflitando)...

Lembrando que dentro da head existe um jQuery sendo executado e no footer outra instância dele sendo chamada (parece que foi copiado e colado, já que o comentário está em inglês, diferente dos demais). Idem ao jQuery migrate.

Plugins, efeitos, uso incorreto de tags como async e defer em scripts podem causar o que está acontecendo hoje. Solução expressa não vou conseguir te fornecer. O importante é ir removendo plugins um por um, scripts um por um e ir testando até achar o que está influenciando.

Abraços!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Retirei o script que dava erro da header. O console não aponta mais nada e continua com o mesmo problema.

Ah, e já fiz teste mudando a estrutura HTML também.

Meu CSS nunca deu problema algum e uso o mesmo padrão.

 

Vou continuar fazendo testes. Obrigada.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.