jquery 'load()' event methods is not working inside jquery ready() event method on mobile-CodePudding

I tested on firefox mobile and chrome mobile browser. Perfectly working on computer browsers

Here is my code inside ready() and load() event method:

$(document).ready(function(){
    $(window).on('load hashchange', function(event) {
       alert();
    });
});

Why alert() is not working after page completed loading.

And here is my another code:

$(function({
   $.ajaxSetup({
    headers : {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
   });
});
$(window).on('load hashchange', function(event) {
    $.ajax({
      //ajax request faild due to csrf token mismatch
    });
});

I didn't found any X-CSRF-TOKEN request header on chrome devtools.

According to the w3schools 'The ready() method should not be used together with <body onl oad="">'. But I'm not using any html inline load event. Please help me to find out this issue.

I'm using jquery v3.6.0 on my project. Also I used usb remote debugging for check request headers. Thanks in advance

CodePudding user response：

In Chrome Desktop $(document).ready(fn) will run before $(window).on('load', fn).

In Desktop/Mobile Firefox and Mobile Chrome, ready runs after load.

Try:

const print = (s) => out.innerHTML  = '\n'   s;
$(document).ready(function() { print('ready'); });
$(window).on('load', function() { print('load'); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<pre id="out"></pre>

So, you shouldn't rely on their order for code that has some kind of time-related coupling.

For instance, you could run both on either ready or load, or even run that .ajaxSetup directly (not wrapped into a ready).