题目1:如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现
function isVisible($node){
if ($node.offset().top >= $(window).scrollTop() &
$node.offset().top <= $(window).scrollTop() + $(window).height()){
return true
}
}
题目2:当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
$(window).scroll(function(){
if (isVisible($node)) console.log(true)
})
题目3:当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现
$node.data('flag',true)
function isVisible($node){
if ($node.offset().top >= $(window).scrollTop() & $node.offset().top <= $(window).scrollTop() + $(window).height() ){
$node.data('flag',false)
return true
}
}
$(window).scroll(function(){
if ( $node.data('flag') )
if (isVisible($node)) console.log(true)
})
题目4: 图片懒加载的原理是什么?
- 原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储在
img
标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。
- 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。
题目5: 实现视频中的图片懒加载效果
http://output.jsbin.com/doruhi