dove è il posto migliore dove posizionare uno snippet di javascript per modificare il DOM di una pagina prima di renderizzare

Ho alcune pagine dinamiche e voglio modificare determinati elementi prima che la pagina sia completamente renderizzata.dove è il posto migliore dove posizionare uno snippet di javascript per modificare il DOM di una pagina prima di renderizzare

mio frammento è qualcosa di simile

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

io non ho accesso per cambiare il lato server di contenuti.

Dove è il posto migliore in cui inserire lo snippet affinché il codice venga eseguito prima della pagina che ha reso?

Piuttosto, sta mettendo il javascript in HEAD (all'interno dell'evento window.onload?) O prima del BODY di chiusura (non all'interno di un listener di eventi) ottimale?

fonte

2010-04-28 markmarkoh

AFAIK non è possibile farlo. Perché prima che una pagina venga visualizzata non ci sarà alcun elemento e non è possibile accedere agli elementi che non sono stati caricati nell'albero DOM.

fonte

2010-04-28 10:06:06 rahul

Temo che sia altamente improbabile che sia possibile eseguire lo script prima del rendering della pagina. Certo, puoi inserire uno script in linea e farlo usare document.write (...) nel luogo in cui desideri che venga visualizzato il tuo contenuto, ma questa è una soluzione orribile. Orherwise il meglio che puoi fare è l'evento 'DOM Ready', anche se è difficile da fare su tutti i browser in modo coerente, hai davvero bisogno di una libreria per astrarre i dettagli. jQuery fornisce il metodo pronto per attivare un evento quando il DOM è pronto, piuttosto che quando la pagina e tutte le risorse sono state caricate.

fonte

2010-04-28 10:08:14 Geoff

Poiché il browser di solito rende elementi subito dopo che sono stati analizzati il modo migliore sarebbe fare posto il codice in un elemento script direttamente dopo l'elemento di riferimento:

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

fonte

2010-04-28 10:14:29 RoToRa

Non sicuro di aver capito il problema in modo corretto, ma se si utilizza un ascoltatore di eventi all'interno della testa (come jQuery $(document).ready()), sarà possibile modificare l'elemento una volta che la struttura dom è stata caricata passando lo snippet alla funzione (handler) chiamata quando scatta l'evento.

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

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

    <SCRIPT> 

</HEAD>

Utilizzando nucleo javascript si dovrà sborsare i vostri ascoltatori di eventi per mozilla (W3C) e le caratteristiche tecniche degli eventi di Internet Explorer. C'è un sacco di documentazione su come farlo su internet.

In entrambi i casi, la cosa migliore da fare in questo caso sarebbe ovviamente creare il contenuto da soli, non alterarlo post rendering.

fonte

2010-04-28 11:29:03 FK82

Se non si desidera eseguire il rendering di alcun elemento prima di apportare modifiche al DOM, è possibile impostare CSS display: none sull'elemento body e quindi modificarlo in display: block una volta terminato.

fonte

2017-05-15 08:05:52

dove è il posto migliore dove posizionare uno snippet di javascript per modificare il DOM di una pagina prima di renderizzare

risposta

Problemi correlati