题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true
}
return false
}
题目2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>item2</title>
<style>
p {
width: 600px;
height: 100px;
border: 1px solid;
}
</style>
</head>
<body>
<p>第1个元素</p>
<p>第2个元素</p>
<p>第3个元素</p>
<p>第4个元素</p>
<p>第5个元素</p>
<p>第6个元素</p>
<p>第7个元素</p>
<p class="test">第8个元素</p>
<p>第9个元素</p>
<p>第10个元素</p>
<script>
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $('.test').offset().top
if (offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
console.log('true')
}
})
</script>
</body>
</html>
题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>item3</title>
<style>
p {
width: 600px;
height: 100px;
border: 1px solid;
}
</style>
</head>
<body>
<p>第1个元素</p>
<p>第2个元素</p>
<p>第3个元素</p>
<p>第4个元素</p>
<p>第5个元素</p>
<p>第6个元素</p>
<p>第7个元素</p>
<p class="test">第8个元素</p>
<p>第9个元素</p>
<p>第10个元素</p>
<script>
var isShow = false // 添加判定条件
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $('.test').offset().top
if (offsetTop < scrollTop + windowHeight && offsetTop > scrollTop && isShow === false) {
console.log('true')
isShow = true
}
})
</script>
</body>
题目4： 图片懒加载的原理是什么？
- 对于所有的img标签，把真实的地址放入自定义属性内，例如放到data-src内，
- 当页面滚动时，检查页面所有的img，判断该img标签是否出现在屏幕显示范围内；
- 当该img标签出现在屏幕显示范围内，判断该img标签是否已经加载过；
- 如果该img标签没有加载过，通过JS给img的SCR属性赋值，加载该img标签
题目5： 实现视频中的图片懒加载效果
题目5
网友评论