Como os sites de notícias, por exemplo, a Forbes / Zdnet mesclam perfeitamente uma página da Web em outra?

14

Se você for para Eg:

Quando você chega ao final da página, uma nova notícia é carregada e o URL no meu navegador da Internet muda para o URL desta próxima notícia. Então, eu queria saber como uma página da Web pode carregar quase instantaneamente a próxima página com um atraso quase insignificante entre as páginas. Eles estão, por exemplo, fazendo o pré-download da página da história do Next News e, em seguida, carregando a página muito rápido?

javascript web-development web-applications html websites zordman
fonte
1
Pressione e segure a Endtecla e você verá o atraso do processo de carregamento.
MonkeyZeus
5
A questão mais importante é por que eles fazem isso.

Respostas:

25

A resposta curta é que o código Javascript do lado do cliente da página detecta quando você fica "muito perto" da parte inferior da página e solicita ao servidor mais dados quando isso acontece.

Sem ficar muito técnico, eles não estão recarregando a página da web inteira. Em vez disso, o código Javascript nessa página está solicitando mais dados do servidor e, quando recebe os novos dados, os adiciona à página atual. As partes da página que não precisam ser alteradas permanecem completamente inalteradas.

A maneira mais moderna de fazer isso é usar os recursos de modificação de histórico do HTML5 , que parecem ser o que esses sites estão usando.

Ixrec
fonte
4
Sua descrição está faltando uma etapa: onde eles realmente alteram o histórico, além de adicionar mais dados à página. O que torna a sua “forma mais moderna de fazer esse ” meio estranho, porque este se refere ao processo de modificar a história, que na verdade não são mencionados na resposta. (Gramatical, este remete para deixando o resto da página inalterados, ou talvez para adicionar dados para a página, que normalmente é feito com AJAX, e não pode ser feito com os recursos de história de modificação HTML5.)
KRyan
E quanto à alteração do URL, como isso acontece sem forçar uma recarga? Porque no seu link, se você recarregar uma 'página modificada' (por exemplo /second), ela erros. Isso não acontece no site de notícias da OP - eles alteram o URL precisamente para que você possa compartilhá-lo.
OJFord
@OllieFord é para isso que serve a API da história. history.pushStatee history.replaceStatepermite alterar o URL na barra de endereço sem sair da página atual. É a substituição mais moderna do truque antigo de alterar o fragmento de URL ( #something), com uma grande vantagem: a API de histórico permite enviar URLs "reais" que o servidor pode participar na geração, enquanto o fragmento precisa ser completamente suportado. do lado do cliente.
hobbs
Ah ok. Mas como eu disse, a demonstração está quebrada, o que é confuso.
OJFord 13/06/2015
Por alguma razão, a demonstração da história com a qual eu estava familiarizada foi completamente interrompida quando essa pergunta surgiu, de modo que o link foi o primeiro que eu pude achar que parecia funcionar. Sinta-se livre para sugerir um link melhor.
Ixrec
20

Uma grande chave para entender o que está acontecendo: é possível, via Javascript, definir o URL na barra de endereços sem realmente redirecionar o usuário. Para ver isso em ação, cole o código abaixo no console do navegador suportado. Observe que ele altera sua barra de endereço para http://programmers.stackexchange.com/yay.html.

history.pushState(null,null,'/yay.html')

O benefício dessa abordagem é que, se o usuário marcar depois de rolar para uma história, o marcador saberá para onde enviar o usuário. A rolagem infinita dos resultados de pesquisa do DeviantArt é um bom exemplo desse comportamento.

Brian
fonte
Espere, o DeviantArt implementou a modificação do histórico em seus resultados de pesquisa, para que você possa realmente vincular a / marcador / gravar uma página específica? Isso é ... bastante. Por quanto tempo determinados resultados permaneceriam em uma página específica para uma consulta específica? Se você marcar como favorito, não esperaria ver os mesmos resultados nessa página em particular amanhã ... Devo me lembrar de investigar isso.
KRyan
@KRyan apenas modifica o offsetparâmetro que pula uma certa distância no conjunto de resultados. Como a ordem de classificação padrão parece ser "popular o tempo todo", os resultados provavelmente são um pouco estáveis, mas definitivamente não se você alternar a ordem de classificação para "mais recente" e procurar algo popular.
hobbs