Home > Web Front-end > JS Tutorial > Loading order of jquery's $(document).ready() and onload_javascript skills

Loading order of jquery's $(document).ready() and onload_javascript skills

WBOY
Release: 2016-05-16 18:26:19
Original
1101 people have browsed it

Recently, when I modified a page embedded in a frame, I used jquery for effect, and the page itself was also bound to the onload event. After the modification, the test runs normally and smoothly under Firefox, but it takes more than ten seconds for the jquery effect to appear under IE, and the day lily is cold.

At first I thought it was conflicting with the onload method. A common saying on the Internet is that $(document).ready() is executed after the page DOM parsing is completed, and the onload event is executed after all resources are prepared. In other words, $(document).ready() is executed after the page DOM parsing is completed. Executed before onload, especially when the page pictures are larger and more, the time difference may be larger. But on my page, the picture has been displayed for more than ten seconds, but the jquery effect has not yet appeared.

Try deleting the onload loading method, but the result is still the same. It seems that there is no need to use $(document).ready() to write the original onload event binding. So what is the reason why Firefox works but IE does? Then debugging, I found that the originally bound onload method under IE was executed before the content of $(document).ready(), while Firefox executed the content of $(document).ready() first, and then executed the original onload method. . This doesn’t seem to be completely consistent with what’s said online. Haha, it’s interesting. It seems to be getting closer to the truth.

Look through the source code of jquery to see how $(document).ready() is implemented:

Copy code The code is as follows:

if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try {
document.documentElement.doScroll("left");
} catch( error ) {
  setTimeout( arguments.callee, 0 );
   return;
  }
  // and execute any waiting functions
 jQuery.ready();
})();
jQuery.event.add( window, "load", jQuery.ready );

result It is clear that IE, like Firefox, first executes the content of $(document).ready() and then executes the original onload method only when the page is not embedded in a frame. For the page embedded in the frame, it is only bound to the load event for execution, so naturally it is the turn after the original onload binding method is executed. And this page happens to have a resource that is inaccessible in the test environment, and the delay of more than ten seconds is exactly the time difference it amplifies.

Author: Joyce Liu
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template