一、如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现。
function isVisible($node) {
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight(true);
if (windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight) {
return true;
}else{
return false;
}
}
二、当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现。
元素每次出现都在控制台打印
1
2
我出现在可视窗口
4
预览
三、当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现。
元素每次出现都在控制台打印
1
2
我出现在可视窗口
4
预览
四、图片懒加载的原理是什么?
当访问一个页面的时候,首先把img的src置为正在加载的图片地址,因为所有的这个背景图片都一样,所以只需加载一次。真正的所需加载的地址放到另外的属性上面。等到页面滚动到那一部分的时候,再把页面中的img标签的src属性发送请求并下载图片,通过动态改变img的src属性实现。减少网络请求。
五、实现视频中的图片懒加载效果。
简单的图片懒加载
- ![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)
- ![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)
- ![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)
- ![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)
- ![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)
- ![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)
- ![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)
- ![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)
- ![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)
- ![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)
- ![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)
- ![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)
- ![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)
- ![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)
预览
六、实现视频中的新闻懒加载效果。
newsGetMore.html
新闻懒加载
router.js
app.get('/getNews', function(req, res) {
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 page = req.query.page;
var len = 3;
var filterNews = news.slice(page*len, page*len+len);
res.send({
status: 0,
filterNews
});
});