Learn easyui 2: jQuery's ready function and easyloader's load callback function

The Ready event is not necessarily ready.

When using easyloader, you must note the loading time of the script. easyloader loads modules asynchronously. Therefore, the modules you use may not have been loaded. For example, the following code.

<Script type = "text/javascript"> easyloader. locale = "zh_CN"; using ("messager", function () {alert ("loaded successfully! ") ;}); $ (Function () {$. messager. alert ('warning', 'the warningmess') ;}); </script>

It looks very simple and uses jQuery's ready function. Unfortunately, you will find the following errors after executing the command.

TypeError: $. messager is undefined [interrupted here] $. messager. alert ('warning', 'the warningmess ');

Why does this error occur when using is already used for loading? Isn't this already used in the ready function?

If you modify the previous Code and use lele.info to enter the log information, it will be clear.

<Script type = "text/javascript"> easyloader. locale = "zh_CN"; using ("messager", function () {lele.info ("messager loaded successfully. ") ;}); $ (Function () {console.info (" Ready "); $. messager. alert ('warning', 'the warningmessage');}); </script>

You can view the output information in Firebug.

It is clear that the Ready function is executed before the using function.

That is to say, you cannot think that the required modules have been loaded in jQuery's Ready function. The reason is simple. It is caused by asynchronous loading.

Use JavaScript to create a script element and insert it into the DOM. This enables non-blocking loading of javascript scripts. This method is called the "Script DOM Element" method. Easyloader of easyui implements asynchronous loading in this way.

So when can we call the delayed loading module? The answer is that in the callback function of the loading module, you can modify the previous Code as follows:

<Script type = "text/javascript"> easyloader. locale = "zh_CN"; using ("messager", function () {lele.info ("messager loaded successfully. "); $. Messager. alert ('warning', 'the warningmessage');}); $ (function () {console.info ("Ready") ;}); </script>

The conclusion is that if you need to use the easyui module, You must place the code in the module's load completion callback function to ensure that the module completes loading properly. If easyui is not involved, you can directly use the ready function of jQuery.

Can't I use the ready function?

What if easyui is called in a button click event? For example, after clicking a button, a prompt box pops up using messager's alert. Do I have to write it in this callback function?

This is not necessary. The click event registration of the button can also be written in jQuery's Ready function as before, because easyui method is not actually called during registration, click is in the future, and the time interval is enough to load.

How to load multiple modules?

What should I do if I need to load multiple modules? Do not forget that the using loading module can also directly specify multiple modules using string arrays. After loading multiple modules, call our callback function. For example, we use linkbutton, at the same time, you also want to use messager to pass an array of strings and represent the main modules as ["linkbutton", "messager"]. This can be done as follows.

<Script type = "text/javascript"> easyloader. locale = "zh_CN"; using (["linkbutton", "messager"], function () {lele.info ("messager loaded successfully. "); $ (" # BtnAlert "). linkbutton (); $. messager. alert ('warning', 'the warningmessage');}); $ (function () {console.info ("Ready") ;}); </script>

This ensures the correct execution of our scripts.

I saw a friend on the InternetAbandon easyloader because of a loading error,This may be because of the above analysis.

Additional reading:

Century light: jQuery Easyui Easyloader usage notes