Jak wyświetlić okno ładowania, gdy ktoś kliknie określony link?

Question

Mam adres URL, który otwiera stronę, która ładuje się bardzo wolno i nie mam nad nią kontroli.

Chcę wyświetlić okno dialogowe ładowania, gdy ktoś kliknie ten adres URL lub zablokuje stronę z nakładką div, gdy tak się stanie.

Uwaga: to nie jest to samo pytanie, jak te związane z ajaxem, dotyczy to zwykłego kliknięcia adresu URL od użytkownika, nie wszystkie z nich są tylko określone.

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

Przypuszczam, że to, czego szukam, to co umieścić na onClick.

Answer 1

Może zajrzeć do pól modalnych. Możesz aktywować pole modelu, kiedy zapytanie ajaxowe jest wysyłane, a po pomyślnym zakończeniu może je zamknąć. https://www.google.com/search?sugexp=chrome,mod=10&sourceid=chrome&ie=UTF-8&q=modal+box

Answer 2

Można to zrobić:

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

Demonstration (zmienić link do bardzo powolnego strony dla najlepszego efektu)

Ale to zależy od strony: jeśli strona przesyła niezwłocznie pewne treści ale nie cała zawartość, nie będziesz miał czasu, aby zobaczyć swój div.

Answer 3

Chociaż ajax byłby bardziej elegancki, jest to możliwe. Musisz przechwycić nawigację, zapobiegając domyślnemu zdarzeniu, a następnie wymusić aktualizację interfejsu użytkownika, a następnie zmienić lokalizację na docelowy adres URL. Coś takiego:

$('#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

Przypuszczalnie będziemy chcieli okno loading pojawiać się natychmiast, a potem zniknąć i zostać zastąpiona przez nową stronę, kiedy nowa strona wygenerowana?

Trzy pomysły przychodzą na myśl.

---

Jeśli masz kontrolę strony źródłowej, ale nie cel - Użyj procedury obsługi zdarzenia kliknięcia zastąpić normalne zachowanie etykietami ze coś takiego:

1. wyświetlania animacji ładowania
2. Wyślij żądanie AJAX do adresu URL zdefiniowanego przez atrybut href tagu (na przemian utwórz ukryty adres URL jako źródło)
3. Po zakończeniu żądania zastąp treść dokumentu odpowiedzią.

To może stać się naprawdę owłosione, ponieważ nie stracisz javascript i css zdefiniowanych na oryginalnej stronie. Nie zmienia również adresu URL wyświetlanego w przeglądarce użytkownika.

---

Jeśli masz kontrolę nad cel i może sprawić, że Cacheable docelowego (nawet na kilka sekund): Można załadować stronę w tle za pośrednictwem AJAX, a następnie przekierować do niego. Pierwsze ładowanie będzie powolne, a następnie przekierowanie załaduje stronę z pamięci podręcznej.

---

a jeszcze inna alternatywa: Jeśli masz kontrolę strony docelowej, można zdefiniować opcjonalny parametr tak, że jeśli parametr jest obecny, serwer zwraca stronę składającą się tylko z animacji załadunku i trochę javascript, który ładuje aktualną stronę.