2012-09-26 8 views
15

Czy istnieje sposób na wykonanie kodu jQuery, zanim DOM będzie gotowy?Czy działa kod jQuery zanim DOM jest gotowy?

+1

Tak. Ale jego części, które wchodzą w interakcję z DOMem, nie będą działać. –

+2

Tak, jest, ale biorąc pod uwagę, że jQuery jest przeznaczony głównie do zmiany DOM, dlaczego chcesz? –

+0

zobacz :: http://stackoverflow.com/questions/4124765/how-to-load-jquery-before-dom-is-ready –

Odpowiedz

16

jQuery to po prostu JavaScript, więc pytanie brzmi: "Czy można uruchomić JavaScript, zanim DOM będzie gotowy" i zgaduję, że masz na myśli dokument, a nie DOM.

Jeśli możemy zgodzić się, że pytanie brzmi "Czy można uruchomić JavaScript zanim dokument będzie gotowy". Wtedy odpowiedź brzmi: tak. JavaScript zostanie wykonany po napotkaniu.

Dlatego prawie zawsze widzisz lub $(document).ready(function(){...}), ponieważ większość kodu jQuery wymaga, aby dokument był gotowy, ale kod dołączający obsługę zdarzeń jest z pewnością wykonywany przed dokumentem jest gotowy (w przeciwnym razie nie byłby w stanie obsłużyć dokument gotowy wydarzenie).

Zazwyczaj kod JavaScript należy umieszczać u dołu kodu HTML, ale jeśli chcesz go wykonać wcześniej, wystarczy umieścić go wcześniej w dokumencie, np. w nagłówku.

<html> 
    <head> 
    ... 
    <script> 
     //place your code to be executed early here 
    </script> 
    </head> 
... 
</html> 
3

Jeśli to jQuery w nagłówku dokumentu, a następnie napisać kod w innym tagu skrypt w głowie, to będzie działać przed DOM jest gotowy:

<head> 
    <script src="jquery.js"></script> 
    <script> 
     // Do some stuff before the DOM is ready 
    </script> 
</head> 
<body> 
    <!-- Browser hasn't got this far, so no elements will be available --> 
</body> 

Jednak oczywiście wygrał” • móc współdziałać z dowolnymi elementami DOM, ponieważ jeszcze nie istnieją.


Mimo, że nie jest technikę można wykorzystać w nowoczesnych przeglądarkach, które pozwalają na interakcję z elementami DOM, ponieważ są one wstawiane na stronę (gdy przeglądarka renderuje go). Opiera się na CSS animation events. Napisałem a simple library (Progressive.js), aby ułatwić obsługę.

Powiązane problemy