20

En jQuery exist(ían) al menos cuatro funciones para manipular elementos del DOM cuando el mismo estuviese listo:

$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )

De ellas quizá la más usada es la segunda:

$( document ).ready(function() {
  // Handler for .ready() called.
});

La cual ha sido declarada obsoleta a partir de jQuery 3.

Aunque actualmente nuestro código funciona, es posible que deje de hacerlo en jQuery 4. Por tanto, se recomienda reemplazar el código anterior por este:

$(function() {
  // Handler for .ready() called.
});

La noticia de obsolescencia de document.ready se encuentra aquí:

A partir de jQuery 3.0, sólo se recomienda la primera sintaxis, o sea, $(function() { ... }); Las otras sintaxis siguen funcionando pero están obsoletas. Esto se debe a que la selección no tiene relación con el comportamiento del método .ready (), que es ineficiente y puede conducir a suposiciones incorrectas sobre el comportamiento del método. Por ejemplo, la tercera sintaxis funciona con "documento" que no selecciona nada. La cuarta sintaxis espera que el documento esté listo, pero implica (incorrectamente) que espera que las imágenes estén listas.

La pregunta

Mi pregunta es con respecto al hermano mayor de $( document ).ready(function() {, es decir, $(window).load(function() {});

¿jQuery 3 también ha cambiado con respecto a window.load?

Si ha cambiado, ¿cuál sería la forma de actualizar el código?

Pregunta relacionada: ¿Cuál es la diferencia entre window.onload y $(document).ready()?

A. Cedano
  • 86,578
  • 19
  • 122
  • 221
  • Muy buena pregunta "Dorothy" (Expresion del meme)..http://i.ytimg.com/vi/Z7-WHm3YTog/0.jpg – Ivan More Flores Aug 03 '17 at 17:11
  • Según lo que tengo entendido, `$(document).ready(hdl)` es prácticamente un polyfill para `DOMContentLoaded`, así que para fines prácticos, es conveniente este último **por ser un estándar**. Respecto a `$(window).load(hdl)`, es lo mismo, como `.val()` es a `.value`. ([Referencia al código fuente](https://github.com/jquery/jquery/blob/bd984f0ee2cf40107a669d80d92566b8625b1e6b/src/core/ready.js) – gugadev Aug 03 '17 at 17:24
  • Relacionado: [¿Cuáles son las novedades y las ventajas de jQuery 3?](https://es.stackoverflow.com/q/51533/65) – Rubén Aug 03 '17 at 18:45

2 Answers2

14

No importa si es window, document, img o lo que sea, lo que se eliminó son los metodos .load(), .unload(), y .error()

Cambios importantes: .load(), .unload(), and .error() eliminados

Estos metodos son accesos directos a operaciones de eventos, pero tienen verdaderas limitaciones con la API. El evento .load() genera un conflicto con > el metodo ajax.load(). El metodo .error() no puede ser usado con window.onerror por la manera en la que esta definida el metodo del DOM. Si se necesita vincular este tipo de eventos, usar el metodo on(), ej: cambiar $("img").load(fn) por $("img").on("load",fn).

En lugar de usar 

$(window).load(function() {});

se usará

$(window).on("load", function (e) {});

Es importante usar "load" ya que el evento "ready" tambíen fué eliminado

Cambios importantes: .on("ready", fn) eliminado

jQuery ya no soporta el evento sintético "ready" que puede ser usado con las funciones del evento. Este evento era susceptible a errores y deprecado en jQuery 1.8 porque este solo llamaría al callback si este era vinculado antes de que el documento estuviera listo. Reemplazar cualquier uso con $(fn) en su > lugar, seguramente funcione.

Puedes checarlo en Cambios en JQuery 3.0

Hictus
  • 1,704
  • 7
  • 21
Lato
  • 1,496
  • 4
  • 12
0

La verdad es que no sé si habrá cambiado, pero lo que puedo comentar al respecto y compartir es la manera en la que yo ejecuto mis funciones cuando quiero utilizar el window.load, recordemos que esto es una asignación, por lo que solo puedes ejecutar un función a la vez, por el contrario, si agregas este pequeño trozo de código en tu js o en varios js's que quieras cargar con funciones puedes hacer algo asi:

if (document.addEventListener){
    window.addEventListener('load',la_funcion_que_sea,false);
} else {
    window.attachEvent('onload',la_funcion_que_sea);
}

Espero haber sido de ayuda. Saludos! La información mas completa lo puedes encontrar en este post: http://codexexempla.org/articulos/2007/lanzar_funciones.php

Fernando Campos
  • 477
  • 2
  • 11