Public page of references js function error

　　For web sites have a lot of shared modules, such as headers, footers, and user fences between many pages. Many times for convenience and save time, we write a function in a public module, then call in other pages. But we when referring to public js function, some can be cited, but some error; this is because js loaded question, namely the current page finished loading, but some public pages has not been loaded on the public reference js, will report this function not found.

Js public reference page header

The results are as follows:

Public footer references js

The results are as follows:

From the above two examples, we can know js loading order is from top to bottom, plus, first load the page header --- the current page - footer Finally, all references to the current page is not loaded on the footer js will be reported "f_public is not defined"

Solutions are as follows:

$(document).ready(function () {
        f_public();
})

When the DOM (Document Object Model) has been loaded, and when the page (including images) has been fully rendered, ready event occurs; that is, equal footer finished loading before calling this function.

js pages in the order of execution

1: using jQuery $ (function) {};

2: using jquery $ (document) .ready (function () {}); essentially no difference before both the first type are the kinds of shorthand. Two document is finished loading after the execution method.

3: using jQuery $ (window) .load (function () {});

4: Use window.onload = function () {} A third and fourth until the entire window is loaded to perform the method thereof. There is no difference between the two, just use a dom object using a jQuery object.

5: static binding on the label onload event, <body onload = "aaa ()"> wait for the body loading is completed, it will execute aaa () method.

Well, these five ways, the order of execution is kind of how it?

By below code verification found:

Using 1: jQuery's $ (function) {} and 2: jquery's $ (document) .ready (function () {}); regardless of the position of where to place, always remaining three priority mode (Reason: both mode is performed after the document is loaded, the latter three is to wait until the entire page load has finished executing window), the order of execution between the two is who is at the top who takes precedence.

Use 3: jQuery the $ (window) .load (function () {});

　　　　4: window.onload = function bbb () {} the two, always take precedence over <body onload = "aaa ()"> performed. They both also based on the implementation of the order who over who should perform.

Use 5: <body onload = "aaa ()"> always the last execution.

<script type='text/javascript'>

　　window.onload = function(){
　　　　alert("页面加载完成====》onload");
　　}

　　$(window).load(function(){
　　　　alert("jquery===》window load" );
　　})

　　$(document).ready(function () {
　　　　alert("jquery====》document ready");
　　});

　　$(function(){
　　　　alert("jquery====》document onload");
　　});

　　function aaa(){
　　　　alert("Static label ==== "the onload " ); 
　　}

 </ Script> 

<body the onload = " AAA () " > 

</ body>

Public page of references js function error

Guess you like