如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible(ele) {
var scrollTop = $(document).scrollTop();//滚动距离
var h = $(window).height();//可视窗口的高度
var offsetTop = ele.offset().top;//目标元素距离文档顶部的距离
if(offsetTop < h + scrollTop && scrollTop < offsetTop){
return true;
}
return false;
}
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
图片懒加载的原理是什么？
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径不设置，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
使用这个技术的原因：一些大型网站图片资源较多，如果资源一次请求完毕，会造成页面加载速度漫长；并且会造成服务器的压力较大，吃不消。而利用懒加载的原理可以在用户需要看到图片的时候，发送请求加载图片，优点不言而喻。
原理：通过监听页面的滚动，实时获得滚动的距离scrollSize，并获得需要展现的内容距离文档顶部或左边的距离大小offsetTop或offsetLeft；以及整个可视窗口的高度h；元素在可视范围内的条件下，三者的关系应为：
scrollSize+h > offsetTop&& scrollSize<=offsetTop;
//左右滚动同理
这样就可以通过监听滚动条件，来选择是否发送请求加载图片。
实现视频中的图片懒加载效果
实现如下 新闻自动懒加载效果54 （这里是参考代码258， 其中html里的为前端代码， js 里的内容为 router.js里的后端代码， 也可参考往前班级视频251)
//router.js代码
router.get('/getNews', function(req, res) {
var len = req.query.len;
var ind = parseInt(req.query.ind);
var news = [
{
link: 'http://view.inews.qq.com/a/20160830A02SEB00',
img: 'http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0',
title: '中国轰6K研发险些被俄罗斯发动机厂商卡脖子',
brif: '近日，轰6K＂战神＂轰炸机首次公开亮相。在中国...'
},
{
link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
title: '外媒称中国已经决心造出世界先进的航空发动机',
brif: '资料图：2012年11月14日，第九届中国国际...'
},
{
link: 'http://view.inews.qq.com/a/20160828A007LB00',
img: 'http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0',
title: '传奇导弹专家冯·布劳恩：其实到美国后曾被当局忽视',
brif: '小火箭出品本文作者：邢强博士原文标题：布劳恩博...'
},
{
link: 'http://xw.qq.com/mil/20160830033420/MIL2016083003342001',
img: 'http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0',
title: '中国空军演习加快反导能力建设 韩媒：或针对“萨德',
brif: '中国空军演习加快反导能力建设 韩媒：或针对“萨德'
},
{
link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
title: '外媒称中国已经决心造出世界先进的航空发动机',
brif: '资料图：2012年11月14日，第九届中国国际...'
},
{
link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
title: '为了喝酒，应该海军当年那些水兵也是蛮拼的……',
brif: '嚣张（aggressive）这个词，腐国海军当...'
},
{
link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
title: '西媒臆断老挝“弃华投美” 认为现政府更亲越南',
brif: '西媒臆断老挝“弃华投美” 认为现政府更亲越南'
},
{
link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
title: '中国武警2016年征兵宣传片震撼首发',
brif: '中国武警2016年征兵宣传片震撼首发'
},
{
link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
title: '韩国多次宣称“一旦开战三天内消灭朝鲜空军”，靠谱吗？',
brif: '韩国多次宣称“一旦开战三天内消灭朝鲜空军”，靠谱吗？'
},
{
link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
title: '韩促朝停止诋毁韩国元首 批其丧失最基本礼仪常识',
brif: '韩促朝停止诋毁韩国元首 批其丧失最基本礼仪常识'
},
{
link: 'http://xw.qq.com/mil/20160830033420/MIL2016083003342001',
img: 'http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0',
title: '中国空军演习加快反导能力建设 韩媒：或针对“萨德',
brif: '中国空军演习加快反导能力建设 韩媒：或针对“萨德'
},
{
link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
title: '外媒称中国已经决心造出世界先进的航空发动机',
brif: '资料图：2012年11月14日，第九届中国国际...'
},
{
link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
title: '为了喝酒，应该海军当年那些水兵也是蛮拼的……',
brif: '嚣张（aggressive）这个词，腐国海军当...'
},
{
link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
title: '西媒臆断老挝“弃华投美” 认为现政府更亲越南',
brif: '西媒臆断老挝“弃华投美” 认为现政府更亲越南'
},
{
link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
title: '中国武警2016年征兵宣传片震撼首发',
brif: '中国武警2016年征兵宣传片震撼首发'
},
{
link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
title: '韩国多次宣称“一旦开战三天内消灭朝鲜空军”，靠谱吗？',
brif: '韩国多次宣称“一旦开战三天内消灭朝鲜空军”，靠谱吗？'
},
{
link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
title: '韩促朝停止诋毁韩国元首 批其丧失最基本礼仪常识',
brif: '韩促朝停止诋毁韩国元首 批其丧失最基本礼仪常识'
}
];
var data = [];
for(var i=len*ind;i<len*(ind+1);i++){
data.push(news[i]);
}
res.send(data);
});
