題目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>
