题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var seeHeight =$(window).height();
var scrollTop = $(window).scrollTop();
var offsetTop = $node.offset().top;
if(offsetTop < scrollTop + seeHeight && offsetTop > scrollTop){
return true;
}
return false;
}
题目2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
function isVisible($node){
var seeHeight =$(window).height();
var scrollTop = $(window).scrollTop();
var offsetTop = $node.offset().top;
if(offsetTop < scrollTop + seeHeight && offsetTop > scrollTop){
return true;
}else{
return false;
}
};
$(window).on('scroll',function(){
if(isVisible($node)){
console.log('true');
}
})
题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
function isVisible($node){
var seeHeight =$(window).height();
var scrollTop = $(window).scrollTop();
var offsetTop = $node.offset().top;
if(offsetTop < scrollTop + seeHeight && offsetTop > scrollTop){
if(isTrue){
return false;
}
isTrue = true;
return true;
}
return false;
};
var isTrue;
$(window).on('scroll',function(){
if(isVisible($node)){
console.log('true');
}
})
题目4： 图片懒加载的原理是什么？
基于<img>标签，在初次加载时，不把图片url放在src属性中，而是自定义一个属性，例如data-src。然后检测"scroll"事件，判断图片是否进入了可视范围。如果进入，则将data-src的字段替换到src，此时浏览器会自动去加载对应图片资源。
题目5： 实现视频中的图片懒加载效果
// 初始状态先渲染一次页面
lazyRender();
var timer;
$(window).on('scroll',function(){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){
lazyRender();
},300);
})
// 判断图片是否出现在用户视野(可视区域)中，
function checkShow($img){
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var offsetTop = $img.offset().top;
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true;
}
return false;
}
//判断图片是否已经加载过
function isLoaded($img){
return $img.attr('data-src') === $img.attr('src');
}
//加载图片
function loadImg($img){
$img.attr('src',$img.attr('data-src'));
}
// 遍历img，并渲染页面
function lazyRender(){
$('.container img').each(function(){
if(checkShow($(this)) && ! isLoaded($(this))){
loadImg($(this));
}
})
}
题目6(选做)：实现如下 新闻自动懒加载效果
前端 html
<div class="container">
<ul class="news">
</ul>
<p class="bottom"></p>
</div>
后端 router.js
//打开页面，发起第一次请求
getData(getDOM);
// 1. 从服务器端获取数据
var page = 0;
function getData(cb){
$.ajax({
type:'GET',
url:'/getNews',
data:{
page:page || 0
},
success:function(res){
console.log(res);
cb(res);
page++;
}
})
}
//2. 动态创建DOM，添加到document
function getDOM(items){
// 服务器端数据被获取完了
if(items.length === 0){
$('.bottom').text('没有更多数据了......');
return false;
}
for(var i=0;i<items.length;i++){
var $li = $('<li class="item"></li>');
var $picture = $('<img class="news-photo">');
var $div = $('<div class="news-text"></div>');
var $title = $('<h4 class="title"></h4>');
var $link = $('<a></a>');
var $brif = $('<p class="brief"></p>');
$picture.attr('src',items[i].img);
$title.text(items[i].title);
$brif.text(items[i].brif);
$div.append($title).append($brif);
$link.attr('href',items[i].link);
$link.append($picture).append($div);
$li.append($link);
$('.news').append($li);
}
}
//3. 滚动滚动条到页面底部，发起请求
$(window).on('scroll',function(){
//服务器端数据被获取完了，禁止发起请求
if($('.bottom').text() !== ''){
return false;
}
if($(window).height()+$(window).scrollTop() === $(document).height()){
getData(getDOM);
}
})
