All geek questions in one place

Using jQuery (placed at the bottom of the page) on a specific page

Due to performance, I set jQuery scripts to load at the bottom of the page (immediately before the closing body tag).

My question is how to include page specific scripts? I don't want to put everything in the $ (document) .ready method (again, due to performance).

Update: I am using a template system, so I put the jQuery download in the template. This way jQuery calls are not recognized even if I put them at the end of a specific page because jQuery does not load at that point.

+3
source share
7 answers

jQuery jQuery headjs

+1

100%, , , , , .

, jQuery , , JavaScript, document.ready ? , - ?

<html>
<body>
   <ul id="maybe-some-menu-that-needs-js-initialization-for-example">
   ...
   </ul>
   <script>
     /* javascript goes here that uses jquery for the above menu (or whatever) 
     AND you don't want to wait for document.ready for this to happen */
   </script>
   ...
   <script src="including jquery here"></script>
   <script src="including other scripts here"></script>
</body>
</html>

, , . jQuery ( , , JavaScript) . , jQuery , document.ready .

: , : , .

  • location.pathname, , .
  • JavaScript , .
+4

$(document).ready() , 2 script , , .

+3

$(document).ready, , , DOM. , $(document).ready, - , DOM, . , /, , DOM .. $(document).ready, , , , , ..

, $(document).ready, , , ( ) , ready ( jQuery).

EDIT:

, , , . JavaScript ,

var myPageLibrary = {
    homePage : {

        init : function() {
            $(document).ready(function() {
                /* page specific functions that need to run,
                   for exmaple, binding event handlers, etc */
            });
        }
    },
    aboutPage : {
        init : function() {
            $(document).ready(function() {
                /* page specific functions that need to run,
                   for exmaple, binding event handlers, etc */
            });
        }
    }
}

/* you might have functions here that are bound to events. 
   Here is an example */

function showSubMenu(e) {
    $(e.target).next('div').show();
}

function hideSubMenu(e) {
    $(e.target).next('div').hide();
}

( )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>This is my Home Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="path-to-myPageLibrary.js"></script>
<script type="text/javascript">
    myPageLibrary.homePage.init(); 
</script>
</head>
<body>
  <!-- Page content -->
</body>
</html>

jQuery script, myPageLibrary script, script, myPageLibrary.homePage.init();

+3

, javascript, jquery . jquery . , jquery window.load. , async . :.

<body>
    <script>
        $("#myElem").val(); // fails, "$" not defined
        window.addEventListener("load", function(evt) {
            $("#myElem").val(); // ok, jquery is loaded
        });
    </script>
    <span id="myElem>hi</span>
    <script src="//cdn.jquery.com"></script>
</body>
+1

$(document).ready() <. > .

0

"@section script"? , , jQuery .

@section scripts {
<script>
 jQuery(document).ready(function () {
//put your jQuery codes here
});
</script>
}
0

Source: https://habr.com/ru/post/1719959/

More articles:


All Articles