javascript - w3schools - ¿Qué garantiza exactamente $(documento).ready?

document.ready javascript w3schools

Question

Al ejecutar mi aplicación JavaScript / jQuery (bastante compleja) en el navegador Chrome de Google, parece que $(document).ready dispara mientras que algunos de los archivos JavaScript aún no se han cargado.

El código relevante (simplificado):

En mi archivo HTML

<script>var httpRoot=''../../../'';var verifyLoad = {};</script>
<script src="../../../globalvars.js"></script>
<script src="../../../storagekeys.js"></script>
<script src="../../../geometry.js"></script>
<script src="../../../md5.js"></script>
<script src="../../../serialize.js"></script>
...
<script src="../../../main.js"></script>

Como la última declaración de cada uno de los archivos .js excepto main.js:

verifyLoad.FOO = true; // where FOO is a property specific to the file

p.ej

verifyLoad.jquerySupplements = true;
verifyLoad.serialize = true; 

En main.js:

$(document).ready(function() {
function verifyLoadTest (scriptFileName, token) {
if (!verifyLoad.hasOwnProperty(token)) {
console.log(scriptFileName + '' not properly loaded'');
};
};
verifyLoadTest(''globalvars.js'', ''globalvars'');
verifyLoadTest(''storagekeys.js'', ''storagekeys'');
verifyLoadTest(''geometry.js'', ''geometry'');
verifyLoadTest(''md5.js'', ''geometry'');
verifyLoadTest(''serialize.js'', ''serialize'');
...
}

Para mi sorpresa, veo algunos de estos disparadores. Esto no coincide con mi comprensión de $(document).ready . ¿Qué me estoy perdiendo?

Answer 1

El evento de preparación del documento se activa cuando el navegador ha analizado el archivo HTML de principio a fin y lo ha convertido en una estructura DOM. No garantiza de ninguna manera que se hayan cargado otros recursos (por ejemplo, hojas de estilo, imágenes o, como en este caso, scripts). Solo se refiere a la estructura DOM, y se activa independientemente del estado de carga de los recursos de la página.

Si desea esperar a que se carguen los recursos, use el evento de load la window , que se activa solo cuando cada elemento de la página ha terminado de cargarse.

Ver:

• .load
• .ready