javascript - por - sri afip

Ejecutar la función de JavaScript cuando el DOM está "listo"?

Question

Estoy usando un script de carga de JavaScript que dice que se ejecute la función de inicialización tan pronto como el DOM esté listo. Actualmente lo tengo funcionando bien con una llamada a la función con body.onload o directamente después de que se define la función. La función crea algo de HTML en un div de marcador de posición que actúa como la herramienta de carga de archivos.

Mi pregunta es ¿cuál es la mejor práctica aquí? Dado que funciona por ahora, ¿por qué las instrucciones dicen que ejecutar la función init tan pronto como el DOM esté listo? ¿Debo agregar una etiqueta <script> directamente después del marcador de posición DIV, por ejemplo?

Answer 1

Como probablemente sepa, no debe ejecutar las funciones de inicio antes de que el DOM esté completamente cargado.

La razón por la que debe ejecutar la función de inicio tan pronto como el DOM esté listo, es que una vez que la página se ha cargado, el usuario comienza a presionar los botones, etc. Tiene que minimizar la pequeña brecha inevitable donde se carga la página y las funciones de inicio no tienen " t correr aún Si esta brecha se vuelve demasiado grande (es decir, demasiado tiempo), su usuario podría experimentar un comportamiento inapropiado ... (es decir, su carga no funcionará).

Otros usuarios han proporcionado buenos ejemplos de cómo llamar a la función init, así que no la repetiré aquí ...;)

Answer 2

El DOM generalmente está listo antes de que se ejecute onLoad. onLoad solo se ejecuta después de que todo se cargue: scripts externos, imágenes, hojas de estilo, etc.

Pero el DOM, es decir, la estructura HTML está lista antes de eso. Si ejecuta el código en la parte inferior de la página (o después de las partes de la página con la que funciona el script), también funcionará bien.

Answer 3

En 2015 tienes dos opciones con navegadores modernos:

document.onload

• esto se dispara cuando se carga el documento, pero otros recursos (especialmente las imágenes) no necesariamente han terminado de cargarse.

window.onload

• esto se dispara cuando se carga el documento, Y se cargan todos los demás recursos (de nuevo, especialmente las imágenes).

Ambos eventos anteriores se utilizarían mejor con window.addEventListener (), por supuesto, ya que se permitirían múltiples escuchas.

Answer 4

La solución más fácil es usar jQuery y su $(document).ready(function() { .... }); función. En lugar de .... pones tu propio código.

Tenga en cuenta que básicamente hace lo mismo que sugirió @ Shadow2531, pero también funciona en navegadores antiguos que no son compatibles con ese evento.

Answer 5

Obtén jQuery y usa el siguiente código.

$(document).ready(function(){
    // Do stuff
});

Answer 6

<script>
    window.addEventListener("DOMContentLoaded", function() {
        // do stuff
    }, false);
</script>

Usted hace eso para que sepa que todos los elementos analizados están disponibles en el DOM, etc.