jQuery .load() Poczekaj, aż zawartość zostanie załadowana.

Question

Chcę, aby strony internetowe przesuwały się płynnie jeden po drugim. Zrobiłem $ ("a"). Click(); funkcja, która sprawdza, czy link jest lokalny, i czy dostaje link href i ładuje go do treści.

$('a').click(function(){ 
    var href=$(this).attr('href'); 
    $('body').load(href); 
    return false; 
}); 

Wygląda ładnie, ale moja strona zawiera także wiele wtyczek js. Wykonanie ich zajmuje trochę czasu, a akcja .load pokazuje najpierw zawartość "niezmienioną przez js", a następnie js. Powoduje zły flickr treści.

Czy możliwe jest buforowanie nowych treści za pomocą wszystkich opcji JS, czy nie zmienia się starego ciała, dopóki nie zostanie zrobione, a kiedy wszystkie DOM i JS zostaną wykonane na NOWEJ zawartości, odsuwają starą zawartość i przesuwają się w nowej?

edytuj: Myślę, że nie chodzi o wykrywanie wykonania js, ale o sprawdzenie, czy wszystkie dodatkowe pliki są załadowane - zmiana DOM powinna zostać uruchomiona w tym samym czasie, w którym będzie $ (okno) .load nowego pliku.

[Edycja] ------------------------------------------ ----------------------------

Moje rozwiązanie tego był kodu css (CSS jest ładowany zawsze przed dom jest zbudowany) o nieprzezroczystości dla różnych przeglądarek 0.

.transparent{ 
    -moz-opacity: 0.00; 
    opacity: 0.00; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); 
    filter:alpha(opacity=0); 
} 

Zapobiega to zwykle złemu pomrukowi treści, ale nie zawsze. Teraz jest możliwe, aby wykryć, że zawartość jest ładowana przez jQuery ajax i zastosować pewien czas oczekiwania na show i tak dalej. Ale w rzeczywistości pytanie wciąż jest otwarte.

Aby teraz trochę bardziej prosty przykład na to pytanie.

Jak zacząć zmieniając DOM po $ („ciało”) obciążenia („something.php”) 3000ms po kliknięciu na link, który .load ogień ("something.php") działa? (Ładowanie należy rozpocząć natychmiast po kliknięciu, ale DOM zmiana musi być rozpoczynane później)

Answer 1

Funkcja .load zapewnia drugi parametr, który jest funkcja do wywołania, gdy operacja jest zakończona. Możesz go użyć do, w zasadzie, synchronizacji wszystkich operacji, które polegają lub oczekują na wywołanie ajax, aby zakończyć. Coś takiego:

$("body").load(href, function(responseData){ 
    // whatever you need to do when the ajax call is complete 
}) 

Edit: Ponieważ adeneo zauważył w komentarzach, sprawdź the documentation.

Answer 2

Jedną rzeczą, która może pomóc jest umieścić html wewnątrz jakiegoś tagu skrypt typu zdefiniowanego przez użytkownika (lub załadować html wewnątrz tagu script)

tak:

<script type="text/template" id="myTemplate"> 
    <div>some html</div> 
</script> 

kod html wewnątrz nie zostaną zrozumiane przez Dom dopóki dołączyć go do strony

//... at some point 
var tmp = $('#myTemplate').html(); 
$(body).append(tmp); 

AJOS!

Answer 3

Nie używaj .load(). Ta metoda dokładnie to, czego próbujesz uniknąć.

spróbować zrobić to:

1. obciążenia z $ .get, .post $, $ .ajax lub metoda niezależnie odpowiada. W ten sposób otrzymasz kod HTML ze skryptami jako ciąg znaków HTML.
2. Utwórz ukryty element div lub przezroczysty element div lub inny element, w którym chcesz umieścić zawartość. W tym przypadku upewnij się, że element div nie jest wyświetlany, dopóki nie zostaną wykonane skrypty. Aby to zrobić, jedynym sposobem jest dodanie ostatniego skryptu na każdej stronie, którą chcesz załadować w ten sposób, z funkcją, która usuwa starą zawartość i pokazuje nową. Będąc ostatnim skryptem, nie zostanie wykonany, dopóki nie zrobią tego inni, więc twój DOM powinien być gotowy.

Oczywiście, jeśli twoje skrypty polegają na czymś w rodzaju $ (dokument) .ready(), to nie zadziała, ponieważ zostanie wykonane natychmiast. Obrazy mają ten sam problem. Są one ładowane asynchronicznie, więc nie będziesz wiedzieć, kiedy wszystkie są załadowane, z wyjątkiem sytuacji, gdy dołączasz program obsługi do zdarzenia onload każdego obrazu, co nie jest dobrym pomysłem.

Answer 4

Może należy użyć obietnice i spróbuj coś takiego:

$('a').click(function(){ 
    var href=$(this).attr('href'); 
    $('body').hide(); 
    $('body').load(href, function() { 
     $('body').show(); 
    }); 
});