Inicializando nuestro código jQuery

DOM-jquery.document.readyAlgo también muy importante antes de comenzar a escribir código jQuery es esperar a que todo el documento y los elementos estén listos para poder ser manipulados por jQuery. No es posible interactuar con los elementos del documento si estos no están cargados o peor aún, si ni siquiera existen.

Aunque en práctica, la mejor forma de incluir un script en una página web es en la parte inferior del documento para que no retrase la carga del contenido y así cuando la lectura del documento llegue al script en la parte inferior ya habrá pintados los elementos que se encuentran antes de él, es decir todos los elementos HTML, esto se da así por que la lectura que hace un navegador web sobre un documento se hace desde la parte superior hasta la parte inferior.

De todos modos hay una forma incluyendo el script donde nos parezca mejor tenemos que inicializarlo. El navegador emite un evento cuando se carga el DOM, y este es el momento donde nuestro script debe de estar listo para trabajar, y en jQuery lo podemos hacer de las siguientes formas.

Con $(document) básicamente estamos seleccionado el documento con jQuery que es el que contiene todos los elementos HTML y con el evento.ready() le decimos que cuando este esté listo de paso a una función y es ahí donde se ejecutará nuestro script.

El equipo de jQuery también ha creado un método aún más corto para el evento document ready, es el siguiente:

Otra forma de hacerlo es:

En fin, mas adelante te darás cuenta cual es la mejor forma de hacerlo, y cual se acomoda mas a ti.

Ahora, una cosa es que cargue el DOM y otra es que cargue los elementos y componentes del sitio como tal, me refiero a imágenes etc. Si queremos correr nuestro script cuando los elementos como tal estén cargados, vamos a tener que utilizar el siguiente método:

En el siguiente demo utilizaremos la función para que el código se inicialice cuando el DOM esté listo, luego cargara una imagen pesada, y hasta que esta no cargue no saldrá el mensaje del window.load.

Ahora si, después de estos conceptos básicos vamos a comenzara a trabajar con jQuery.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *