Birisi belirli bir bağlantıyı tıkladığında yükleme iletişim kutusu nasıl görüntülenir?

Question

Yüklemek için çok yavaş olan bir web sayfasını açan bir URL'im var ve üzerinde hiçbir kontrolüm yok.

Birisi bu URL’yi tıkladığında veya bu olduğunda bir bindirme div ile sayfayı engellediğinde bir yükleme iletişim kutusu görüntülemek istiyorum.

Not: Bu, ajax ile ilgili sorularla aynı soruyu değil, normal URL tıklamaları için kullanıcı, yalnızca belirli olanları değil, kullanıcıyı oluşturur.

<A href="http://veryslowload.com" onClick="...">slow load...</a> 

Aradığım şeyin onClick'e ne koymak gerektiğine inanıyorum.

Answer 1

Modal kutularına bakmak isteyebilirsiniz. Ajax isteği gönderildiğinde ve başarılı olduğunda bir model kutusunu etkinleştirebilirsiniz.

$(function(){ 
​ $('a').click(function(){ 
    $('<div class=loadingDiv>loading...</div>').prependTo(document.body); 
    });​ 
}); 

Demonstration

(iyi etki için çok yavaş bir sayfanın bağlantısını değiştirme) Ama sayfasında bağlıdır: https://www.google.com/search?sugexp=chrome,mod=10&sourceid=chrome&ie=UTF-8&q=modal+box

Answer 2

Bunu yapabilirsin sayfa anında bazı içerikler gönderirse ama tüm içerik değil, senin divini görmek için zamanın olmayacak.

Answer 3

Ajax daha zarif olsa da, bu mümkündür. Varsayılan olayı önleyerek navigasyonu durdurmanız, ardından UI'ye bir güncellemeyi zorlamak, ardından konumu hedef URL'ye değiştirmek zorundasınız. Böyle bir şey: Muhtemelen

$('#mylink').click(function(e) { 
    e.preventDefault(); 
    var url = this.href; 
    // Update the UI here 
    setTimeout(function() { 
     // This is a trick to force a repaint 
     window.location.href = url; 
    },0); 
}); 

Answer 4

, sen yükleme iletişim hemen sonra ortadan kaybolacak ve yeni bir sayfa render zaman yeni sayfaya değiştirilmelidir görünmesini isteyeceksiniz?

Akla üç fikir geldi.

---

kaynak sayfanızın kontrolünü ancak hedef varsa - Böyle bir şey etiketleri normal davranış yerine bir tıklama olay işleyicisi kullanın:

1. Ekran yükleme animasyonu
2. Etiketin href özniteliği tarafından tanımlanan URL'ye bir AJAX isteği uygulayın (alternatif olarak, kaynak olarak URL ile gizlenen bir gizli)
3. İstek tamamlandığında, belgenin içeriğini yanıtla değiştirin.

Orijinal sayfada tanımlanmış olan javascript ve css'i kaybetmeyeceğinizden, bu gerçekten çok kıllı olabilir. Ayrıca, kullanıcının tarayıcısında görüntülenen URL’yi değiştirmez. Sen AJAX ile arka planda sayfayı yüklemek ve daha sonra kendisine yönlendirmek olabilir: Eğer hedefin kontrole sahip ve (hatta birkaç saniye) hedef Cacheable yapabiliyorsanız

---

. İlk yükleme yavaş olacak, ardından yönlendirme sayfayı önbellekten yükleyecektir.

---

Ve yine başka bir alternatif

: Hedef sayfanın kontrolünü varsa, parametre varsa, sunucu yalnızca yükleme animasyon oluşan bir sayfası ve biraz ait döndüren böyle bir Parametre tanımlayabilirsiniz gerçek sayfayı yükleyen javascript. ajax yaparken