tofacebook.com -专业IT技术社区 【百家号】脸书百科,jQuery.ready() Web程序 - tofacebook.com-专业IT技术社区
83°

【百家号】脸书百科,jQuery.ready() Web程序

标签:span   otto   dea   fun   选择   loaded   html   dss   bsp   

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>&copy;2018</footer>
<div id="slideAd">nflkjhtgrfdsss</div>

<script>
$(document).ready(function () {
myfun();
});
</script>
</body>
</html>

 

jQuery.ready()

标签:span   otto   dea   fun   选择   loaded   html   dss   bsp   

原文地址:https://www.cnblogs.com/H97042/p/9378887.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: