题目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 。用代码实现
$node.on('scroll',function(){
if(isVisible($node)){console.log(true)}
})
题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
$(window).on('scroll',function(){
$('li').each(function(){
if(checkShow($(this)) && !hasClass($(this))){
console.log('true')
addClass($(this))
}
})
})
function checkShow($node){
var a = $(window).scrollTop()
var b = $(window).height()
var c = $node.offset().top
if(c >= a && c <= a+b){
return true
}
return false
}
function addClass($node){
$node.addClass('show')
}
function hasClass($node){
if($node.hasClass('show')){return true}
return false
}
题目4： 图片懒加载的原理是什么？
对目标元素进行scroll事件绑定，写一个函数对其是否出现在可视区域进行判定，如果出现，再写一个函数对其是否加载进行判断，如果没有，给其src属性添加链接使其可以加载。
题目5： 实现视频中的图片懒加载效果
<!DOCTYPE html>
<html>
<head>
<meta = 'utf-8'>
<title>懒加载demo</title>
<style>
img {
display: block;
margin: 100px;
}
</style>
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div>
< img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
< img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
< img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
< img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
< img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg">
</div>
<script>
$(window).on('scroll',function(){
$('img').each(function(){
if(checkShow($(this)) && !isloaded($(this))){
loadImg($(this))
}
function checkShow($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top
if(offsetTop <= scrollTop + windowHeight && offsetTop >= scrollTop){
return true}
return false
}
function isloaded($node){
return $node.attr('src') === $node.attr('data-src')
}
function loadImg($node){
$node.attr("src",$node.attr('data-src'))
}
})
})
</script>
</body>
</html>
网友评论