Nasıl Haber Web Siteleri Eg Forbes / Zdnet Sorunsuz Bir Web Sayfası diğerine birleştirmek?

Örneğin:

Sayfanın altına ulaştığınızda, Yeni Haber hikayesi yüklenir ve İnternet Tarayıcımdaki URL, bu Sonraki Haber Hikayesinin URL'sine dönüşür. Bu yüzden bir web sayfasının bir sonraki web sayfasını neredeyse anında sayfalar arasında neredeyse ihmal edilebilir bir gecikme ile nasıl yükleyebileceğini merak ediyordum. Örneğin, Sonraki Haber öyküsünün Web sayfasını önceden indirmek ve ardından web sayfasını çok hızlı yüklemek mi?

— Zordman
kaynak

Tuşunu basılı tutun Endve yükleme işleminin geciktiğini göreceksiniz.

— MonkeyZeus

Daha önemli olan soru neden bunu yapıyorlar.

Yanıtlar:

Kısa yanıt, sayfanın istemci tarafı Javascript kodunun sayfanın altına "çok yaklaştığınızı" algılaması ve sunucudan bu durumda daha fazla veri istemesi.

Çok teknik olmadan, web sayfasının tamamını yeniden yüklemezler. Bunun yerine, o sayfadaki Javascript kodu sunucudan daha fazla veri ister, ardından yeni verileri aldığında, bu verileri geçerli sayfaya ekler. Sayfanın değişmesi gerekmeyen kısımları tamamen değişmeden kalır.

Bunu yapmanın en modern yolu, bu sitelerin kullandığı gibi görünen HTML5 geçmiş değişiklik özelliklerini kullanmaktır.

— Ixrec
kaynak

Açıklamanızda bir adım eksik: Burada sayfaya daha fazla veri eklerken geçmişin gerçekte değiştiği yer. Hangisi “yapmanın en modern şekilde yapar bu çünkü garip tür” Bu aslında cevapta belirtildiği almaz tarihini, değiştirme işlemini belirtir. (Dilbilgisi açısından, bu , sayfanın geri kalanını değiştirmeden veya belki de AJAX ile yapılan ve HTML5 geçmiş değişiklik özellikleriyle yapılamayan sayfaya veri eklemeyi ifade eder.)

— KRyan

URL değişikliği ne olacak, yeniden yüklemeye zorlamadan bu nasıl olur? Çünkü bağlantınızda, 'değiştirilmiş bir sayfayı' yeniden yüklerseniz (örn. /second), Hata verir. Bu OP'nin haber sitesinde gerçekleşmez - URL'yi hassas bir şekilde değiştirir, böylece paylaşabilirsiniz.

— OJFord

@OllieFord, geçmiş API'sı öğelerinin amacı budur. history.pushStateve history.replaceStategeçerli sayfadan ayrılmadan adres çubuğundaki URL'yi değiştirmenize olanak tanır. URL parçasını ( #something) değiştirme konusundaki eski hilenin daha modern bir şekilde değiştirilmesi, büyük bir avantajı, geçmiş API'sının sunucunun oluşturmaya katılabileceği "gerçek" URL'leri zorlamanıza izin vermesi ve parça parçasının tamamen desteklenmesi gerektiğidir. istemci tarafında.

— Ocaklar

Ah tamam. Ama dediğim gibi, demo bozuldu, bu kafa karıştırıcı.

— OJFord

Nedense, tanıdığım tarih demosu bu soru ortaya çıktığında tamamen kırılmıştı, bu yüzden bu bağlantının işe yaradığını ilk gördüğüm şeydi. Daha iyi bir bağlantı önermekten çekinmeyin.

— Ixrec

Neler olduğunu anlamanın büyük bir anahtarı: Javascript aracılığıyla, kullanıcıyı gerçekte yönlendirmeden adres çubuğundaki URL'yi ayarlamak mümkündür. Bunu çalışırken görmek için aşağıdaki kodu desteklenen bir tarayıcı konsoluna yapıştırın. Adres çubuğunuzu olarak değiştirdiğine dikkat edin http://programmers.stackexchange.com/yay.html.

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

Bu yaklaşımın yararı, kullanıcı bir hikayeye geçtikten sonra yer işaretlerini kullanıyorsa, yer işaretinin kullanıcıyı nereye göndereceğini bilecektir. DeviantArt'ın arama sonuçlarında sonsuz kaydırılması bu davranışa güzel bir örnektir.

— Brian
kaynak

Bekle, DeviantArt arama sonuçlarında geçmiş değişikliği yaptı, böylece belirli bir sayfaya gerçekten bağlantı verebilir / yer imi koyabilir / başka şekilde kaydedebilirsiniz? Bu ... oldukça bir şey. Yine de belirli sonuçlar belirli bir sorgu için belirli bir sayfada ne kadar kalır? Yer işareti koyarsanız, aynı sonuçları yarın o sayfada görmeyi beklemezdim ... Bunu araştırmayı hatırlamalıyım.

— KRyan

@KRyan, sonuç kümesine offsetbelirli bir mesafeyi atlayan parametreyi değiştirir . Varsayılan sıralama düzeni "her zaman popüler" gibi göründüğünden, sonuçlar muhtemelen biraz kararlıdır, ancak sıralama düzenini "en yeni" olarak değiştirirseniz ve popüler bir şey ararsanız kesinlikle olmaz.

— hobbs