ready()
JavaScript代码放在哪里？
浏览器在渲染HTML页面时，是从头到尾，一行一行地检查执行的。如果JavaScript代码在前面，HTML元素在后面，遇到JavaScript选择一个还未渲染的HTML元素将会选择失败。因此，通常的做法是将脚本放在页面最后（紧跟在</body>标签之前）。
ready()事件
如果将JavaScript代码分和HTML离出来，脚本又在<head></head>之间引入，会不会出问题？
要避免上述问题，可以使用ready()事件。
jQuery的ready()事件通常在DOMContentLoaded事件加载后执行。因此可以保证JavaScript代码被执行。
<!DOCTYPE html>
<html>
???<head>
???????<title>TODO supply a title</title>
???????<meta charset="UTF-8">
???????<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
???????<script>
???????????function myfun() {
???????????????var $window = $(window);
???????????????var $slideAd = $("#slideAd");
???????????????var endZone = $("footer").offset().top - $window.height() - 300;
???????????????
???????????????$(window).scroll(function () {
???????????????????if (endZone < $window.scrollTop()) {
???????????????????????$slideAd.animate({‘right‘: ‘0px‘}, 250);
???????????????????} else {
???????????????????????$slideAd.stop(true).animate({‘right‘: ‘-360px‘}, 250);
???????????????????}
???????????????});
???????????}
???????</script>
???????<style>
???????????body{
???????????????min-width: 600px;
???????????????background-color: #999;
???????????????margin-bottom: 60px;
???????????}
???????????#slideAd {
???????????????width: 130px;
???????????????height: 60px;
???????????????color: #fff;
???????????????bordet-top: 1px solid #fff;
???????????????border-letf: 1px solid #fff;
???????????????border-bottom: 1px solid #fff;
???????????????background-color: #e99295;
???????????????padding: 25px 20px 10px 85px;
???????????????position: fixed;
???????????????bottom: 20px;
???????????????right: -235px;
???????????????text-transform: uppercase;
???????????}
???????</style>
???</head>
???<body>
???????<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
???????<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
???????<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
???????<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
???????<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
???????<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
???????<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
???????<footer>©2018</footer>
???????<div id="slideAd">nflkjhtgrfdsss</div>
???????
???????<script>
???????????$(document).ready(function () {
???????????????myfun();
???????????});
???????</script>
???</body>
</html>
jQuery.ready()
原文地址：https://www.cnblogs.com/H97042/p/9378887.html