window.onload equivalente dopo aver modificato il DOM?

Quando una pagina viene caricata per la prima volta, possiamo usare per assicurarci che tutte le risorse siano state caricate prima di fare qualcosa.window.onload equivalente dopo aver modificato il DOM?

La mia domanda è, se modifichiamo il DOM (ad esempio inserendo un html basato su una richiesta Ajax), c'è qualche evento che si attiva quando il documento è nuovamente nello stato "caricato"? (ad esempio quando l'html inserito contiene più immagini).

(Soluzione con jQuery andrebbe bene).

fonte

2013-03-29 UpTheCreek

@Felix - Non voglio per rilevare le modifiche al DOM , Voglio rilevare quando le risorse sono state caricate dopo aver cambiato il DOM. Tutte le domande a cui fai riferimento riguardano il rilevamento delle modifiche. – UpTheCreek

Forse dovresti dichiararlo esplicitamente. Il DOM è pronto e tutte le risorse caricate sono due cose diverse. –

Giusto per chiarire, poiché sembra che non si faccia distinzione tra caricamento e pronto, in jQuery il .load() si verifica quando la pagina viene completamente renderizzata, mentre .ready() si verifica non appena viene costruita la gerarchia DOM. Se il tuo codice si basa su risorse caricate (ad esempio, è necessario ottenere dimensioni di un'immagine), è necessario utilizzare .load() per garantire che il codice venga eseguito quando tutte le risorse necessarie sono disponibili. Altrimenti puoi usare .ready() per velocizzare le cose, dal momento che il tuo codice verrà eseguito durante il rendering. – excentris

La risposta breve: NO.

La risposta lunga: se si sa cosa si sta cercando è possibile utilizzare gli osservatori di mutazione (https://developer.mozilla.org/en-US/docs/DOM/MutationObserver). è supportato solo nel nuovo browser e, in alcune versioni di Chrome, presenta perdite di memoria quando viene utilizzato con le chiusure.

BTW, document.ready non ti dice se tutte (o qualsiasi ..) delle risorse sono state caricate. ti dice solo che il dom è pronto (cioè la funzione di caricamento, che si spara solo dopo tutte le risorse (beh, tutte le risorse che non sono richieste utilizzando un javascript) sono state scaricate).

fonte

2013-03-29 09:56:29

È possibile utilizzare .done().

Descrizione: Aggiungere i gestori di essere chiamato quando l'oggetto differite è stato risolto.

c'è anche plugin jQuery See Here

fonte

2013-03-29 09:56:46

Non sono sicuro di seguire Dipesh. Posso allegare un fatto alla promessa dalla chiamata ajax, ma questo mi dirà solo quando avrò i dati, non le risorse che hanno iniziato a caricare dopo aver inserito questo nel DOM. O intendi qualcos'altro? – UpTheCreek

direi di sì (non so se questo è supportato da tutti i browser. Io lo uso in Safari e Chrome)

Testcase potete trovare qui : http://maakmenietgek.nl/testcases/domready/ si prega di notare che io non riesco a farlo funzionare in un violino, è per questo che un autonomo testcase

L'index.html assomiglia a questo

<!DOCTYPE html> 
<head> 
    <title>Testcase</title> 
    <script src="jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('#clickme').click(function() { 
     $.get('ajaxdata.html', function(data) { 
      $('#addhere').html(data); 
     }); 
     }); 
    }) 
    </script> 
</head> 
<body> 
    <p id="clickme">clickme</p> 
    <div id="addhere"> 
    </div> 
</body> 
</html>

I dati caricati con la chiamata $.get sembra questo

<p>added data</p> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     alert('added data'); 
    }); 
</script>

L'avviso indica dopo il codice HTML è stato aggiunto al DOM

fonte

2013-03-29 10:18:10

window.onload equivalente dopo aver modificato il DOM?

risposta

Problemi correlati