gdzie jest najlepsze miejsce do wstawienia fragmentu kodu JavaScript, aby zmienić DOM strony, zanim będzie renderować

Mam kilka stron dynamicznych i chcę zmienić pewne elementy, zanim strona zostanie w pełni wyrenderowana.gdzie jest najlepsze miejsce do wstawienia fragmentu kodu JavaScript, aby zmienić DOM strony, zanim będzie renderować

Moje urywek jest coś takiego jak

document.body.getElementById("change").innerHTML = "<img src...";

nie mam dostępu do zmiany po stronie serwera treści.

Gdzie najlepiej umieścić fragment kodu, aby kod działał przed wyświetloną stroną?

Czy raczej umieszczanie javascript w HEAD (w zdarzeniu window.onload?) Lub przed zamykającym BODY (nie wewnątrz detektora zdarzeń) jest optymalne?

Źródło

2010-04-28 markmarkoh

AFAIK Nie możesz tego zrobić. Ponieważ przed renderowaniem strony nie będzie żadnego elementu i nie będzie można uzyskać dostępu do elementów, które nie zostały załadowane do drzewa DOM.

Źródło

2010-04-28 10:06:06 rahul

Obawiam się, że bardzo mało prawdopodobne jest, aby móc wykonać skrypt przed renderowaniem strony. Oczywiście możesz umieścić wbudowany skrypt i użyć go document.write (...) w miejscu, w którym chcesz wyświetlać zawartość, ale jest to okropne rozwiązanie. Najczęściej można to zrobić na imprezie "DOM Ready", chociaż trudno jest to zrobić we wszystkich przeglądarkach konsekwentnie, naprawdę potrzebujesz biblioteki, aby streścić szczegóły. jQuery zapewnia gotową metodę wywołania zdarzenia, gdy DOM jest gotowy, a nie po zakończeniu ładowania strony i wszystkich zasobów.

Źródło

2010-04-28 10:08:14 Geoff

Ponieważ przeglądarka zwykle renderuje elementy natychmiast po ich analizowany najlepszym sposobem byłoby zrobić umieścić kod w elemencie script bezpośrednio po elemencie odwołania:

<div id="change"></div> 
<script type="text/javascript"> 
    document.body.getElementById("change").innerHTML = "<img src..."; 
</script>

Źródło

2010-04-28 10:14:29 RoToRa

Nie jestem pewien, rozumiem problemu poprawnie, ale jeśli użyjesz detektora zdarzeń wewnątrz głowy (takiego jak jQuery's $(document).ready()), będziesz w stanie zmienić element po wczytaniu struktury dominu, przekazując swój opis do funkcji (handler), która zostanie wywołana, gdy zdarzenie zostanie wywołane.

<HEAD> 
    //... 
    <SCRIPT type="text/javascript"> 

     $(document).ready(function() { 
      $("#change").append(
       $("<img src=\"...\">") 
      ) ; 
     }) ; 

    <SCRIPT> 

</HEAD>

Korzystanie rdzeń javascript trzeba będzie bulić swoje detektory zdarzeń dla Mozilli (W3C) i specyfikacji zdarzeń Internet Explorer. Jest mnóstwo dokumentacji, jak to zrobić w Internecie.

W każdym razie najlepszą rzeczą do zrobienia w tym przypadku byłoby oczywiście samodzielne tworzenie treści, a nie modyfikowanie jej po renderowaniu.

Źródło

2010-04-28 11:29:03 FK82

Jeśli nie chcesz renderować żadnych elementów przed wprowadzeniem zmian DOM, możesz ustawić CSS display: none na elemencie body, a następnie zmienić go na display: block, gdy skończysz.

Źródło

2017-05-15 08:05:52

gdzie jest najlepsze miejsce do wstawienia fragmentu kodu JavaScript, aby zmienić DOM strony, zanim będzie renderować

Odpowiedz

Powiązane problemy