Home / Questions / 92628
Accepted
A. Cedano
Asked: 2020-08-04 09:00:39 +0800 CST 2020-08-04 09:00:39 +0800 CST

jQuery 3 declared document.ready deprecated are there changes for window.load too?

  • 772

In jQuery there were at least four functions to manipulate DOM elements when the DOM was ready:

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

Of these, perhaps the most used is the second:

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

Which has been deprecated as of jQuery 3.

Although our code currently works, it may stop working in jQuery 4. Therefore, it is recommended to replace the previous code with this:

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

The notice of obsolescence of document.readycan be found here :

As of jQuery 3.0, only the first syntax is recommended, ie $(function() { ... });The other syntaxes still work but are deprecated . This is because the selection has no bearing on the behavior of the method .ready (), which is inefficient and can lead to incorrect assumptions about the behavior of the method. For example, the third syntax works with "document" which doesn't select anything. The fourth syntax expects the document to be ready, but implies (incorrectly) that it expects the images to be ready.

The question

My question is regarding the older brother of $( document ).ready(function() {, that is, $(window).load(function() {});

Has jQuery 3 also changed from window.load?

If it has changed, what would be the way to update the code?

Related question: What is the difference between window.onload and $(document).ready()?

javascript

2 Answers

  1. Best Answer

    It doesn't matter if it's window, document, img, or whatever, what's removed are the .load(), .unload(), and .error() methods.

    Breaking changes: .load(), .unload(), and .error() removed

    These methods are shortcuts to event operations, but they have real limitations with the API. The .load() event conflicts with the ajax.load() method. The .error() method cannot be used with window.onerror because of the way the DOM method is defined. If you need to bind this type of event, use the on() method, eg change $("img").load(fn) to $("img").on("load",fn).

    Instead of using

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

    it will be used

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

    It is important to use "load"since the event "ready"was also removed

    Breaking changes: .on("ready", fn) removed

    jQuery no longer supports the synthetic "ready" event that can be used with event functions. This event was error prone and deprecated in jQuery 1.8 because it would only call the callback if it was bound before the document was ready. Replacing any use with $(fn) instead will surely work.

    You can check it in Changes in JQuery 3.0

    • 14

  2. The truth is that I don't know if it has changed, but what I can comment on it and share is the way I execute my functions when I want to use the window.load, remember that this is an assignment, so you can only execute one function at a time, on the contrary, if you add this small piece of code in your js or in several js's that you want to load with functions you can do something like this:

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

    I hope I have been helpful. Cheers! The most complete information can be found in this post: http://codexexempla.org/articulos/2007/lanzar_funciones.php

    • 0