题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible
实现
function isVisible($node){
var winH = $(window).height(), //窗口高度
var offsetH = $node.offset().top, //此元素垂直方向偏移
var scrollH = $(window).scrollTop() //垂直滚动距离
if ((offsetH > scrollH) && (offsetH < scrollH + winH)) { //根据这三个参数的值进行判定
return true
}
return false
}
题目2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
function isVisible($node) {
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop()
var winH = $(this).height()
var top = $node.offset().top
if (scrollTop + winH > top) {
console.log('true')
}
})
}
题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
function isVisible($node) {
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop()
var winH = $(this).height()
var top = $node.offset().top
if (scrollTop + winH > top) {
if ($node.data('visible')) {
return
}
$node.data('visible', true)
console.log('true')
} else {
$node.data('visible', false)
}
})
}
题目4： 图片懒加载的原理是什么？
为了整体网站的性能考虑，延时加载图片。把图片真实的URL 放在data-img的值中,当图片进入可视区域把data-img赋给src。
题目5： 实现视频中的图片懒加载效果
http://js.jirengu.com/molifogebi/1/edit
