进阶16
题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible
实现
function isVisible($node){
var windowHeight=$(window).height();
var windowScrollHeight=$(window).scrollTop()
var thisNodeHeight=$node.offset().top
if(windowHeight+windowScrollHeight>=thisNodeHeight){
return true
}
return false
}
题目2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
function isVisible($node){
var windowHeight=$(window).height();
var windowScrollHeight=$(window).scrollTop()
var thisNodeHeight=$node.offset().top
if(windowHeight+windowScrollHeight>=thisNodeHeight&&windowScrollHeight<=thisNodeHeight+$node.innerHeight()){
return true
}
return false
}
$(window).on('scroll',function(){
$('li').eq(7).css('background','red')
console.log(isVisible( $('li').eq(7)))//这里以第八个元素为例，为了方便观察
})
这里需要注意的几点：
第一：offset()获取的第一个元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档。到底是从哪里算起，通过实例，改变border margin padding的值发现计算是从border以内开始算起的，相当于innerHeight();
第二：position的定位是从margin开始算起的，这点很容易，不可能我设置个margin,position:absolute top:0;元素还跑出窗口外面了；
第三：事件scroll
题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
只需要稍加改动就可以，加个全局boolean boo
var boo=false;
$(window).on('scroll',function(){
$('li').eq(7).css('background','red')
if(!boo&&isVisible( $('li').eq(7))){
console.log(isVisible( $('li').eq(7)))
boo=true
}
})
jscode
题目4： 图片懒加载的原理是什么？
关键点1：img便签的src属性记录着图片的地址，可以先添加一个自定义属性data-src
对于img标签的解析没有任何影响，当满足一定的条件的时候将data-src的值赋值给src
关键点2：srollTop(),offset(),$(window).height()这些方法的作用
关键点3：scroll事件、each()方法
关键点4：控制是否是第一次加载
$('img').each(function(){
if(checkShow($(this))&&!isLoaded($(this))){
loadImg($(this))
}
})
$(window).on('scroll',function(){
//checkShow()检查是否满足图片显示的条件
//isLoaded()检查是否已经加载过
//loadImg()加载图片
$('img').each(function(){
console.log($(this).attr('data-src'))
console.log(checkShow($(this)))
console.log(isLoaded($(this)))
if(checkShow($(this))&&!isLoaded($(this))){
loadImg($(this))
}
})
})
function checkShow(x){
var scrollHeight=$(window).scrollTop();
var windowHeight=$(window).height();
var $thisHeight=x.offset().top;
if($thisHeight<scrollHeight+windowHeight){
return true
}
return false
}
function isLoaded(x){
return (x.attr('src')===x.attr('data-src'))
}
function loadImg(x){
x.attr('src',x.attr('data-src'))
}
题目5： 实现视频中的图片懒加载效果
var clock
$(window).on('scroll',function(){
//checkShow()检查是否满足图片显示的条件
//isLoaded()检查是否已经加载过
//loadImg()加载图片
if(clock){
clearTimeout(clock)
}
clock=setTimeout(function(){
console.log('hello')
$('img').each(function(){
// console.log($(this).attr('data-src'))
//console.log(checkShow($(this)))
//.log(isLoaded($(this)))
if(checkShow($(this))&&!isLoaded($(this))){
loadImg($(this))
}
})
},200)
})
github地址
这里需要注意var clock 的位置，以及作用
作用防止在加载的时候重复运行下面的查找判断语句
设置在里面就是函数的局部变量，每次运行会造成if(clock)为false,作为全局变量则能使clock的取值可以为true或者false
题目6(选做)： 实现如下 新闻自动懒加载效果36 （这里是参考代码216， 其中html里的为前端代码， js 里的内容为 router.js里的后端代码， 也可参考往前班级视频205)
我的代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
li{
list-style:none;
margin: 10px;
height: 50px;
padding-top:0 ;
padding-bottom:0 ;
border: 1px solid pink;
text-align: center;
vertical-align: middle;
}
li:hover{
background: green;
}
div{
text-align: center;
}
button{
display: inline-block;
margin: 10px auto;
}
</style>
</head>
<body>
<ul class="news">
<li>新闻</li>
</ul>
<div>
</div>
<script>
function getNews(){//发送ajax请求，并把一个li添加在ul尾部
$.ajax({
url: 'news',
method: 'GET',
}).done(function(result){
var str=''
for(var i=0;i<result.length;i++){
str+='<li>'+result[i]+'</li>'
}
$('.news').append(str)
}).fail(function(jqXHR, textStatus){
console.log(textStatus);
})
}
var clock
$(window).on('scroll',function(){
if(clock){
clearTimeout(clock)
}
clock=setTimeout(function(){
console.log('hello')
checkShow()
},200)
})
var boo=false//控制是否为第一次加载这个页面
var down=0//记录上一次滚动的距离
function checkShow(){
var h=$('li').outerHeight(true)//每个li的高度
var windowHeight=$(window).height();
var scrolly=$(window).scrollTop(); //滚动条离顶部的位置。坐标
var len=0//控制for循环，调用几次getNews()
console.log($('li').length)
if(boo){
if(scrolly>down){
down=scrolly
len=3;
}
}else{
len=Math.floor(windowHeight/h)+2
boo=true
}
for(var i=0;i<len;i++){
getNews()
}
}
checkShow()
</script>
</body>
</html>
