题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
$(function() {
function isVisible($node){
var scrollTop = $(window).scrollTop() //页面滚动高度
var windowHeight = $(window).height() //窗口高度
var offsetTop = $node.offset().top // 元素位于页面高度
return(scrollTop + '/' + windowHeight + '/' + offsetTop)
}
var $container2 = $('.container2')
console.log(isVisible($container2))
})
题目2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
function isVisible($node){
var scrollTop = $(window).scrollTop() //页面滚动高度
var windowHeight = $(window).height() //窗口高度
var offsetTop = $node.offset().top // 元素位于页面高度
if( offsetTop < scrollTop + windowHeight ) {
return true
}else {
return false
}
}
$(window).on('scroll', function(){
var $container2 = $('.container2')
console.log( isVisible( $container2 ) )
})
题目3：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
$(function() {
function isVisible($node){
var scrollTop = $(window).scrollTop() //页面滚动高度
var windowHeight = $(window).height() //窗口高度
var offsetTop = $node.offset().top // 元素位于页面高度
if( offsetTop < scrollTop + windowHeight ) {
return true
}else {
return false
}
}
var clock
$(window).on('scroll', function(){
var $container2 = $('.container2')
if(clock) {
return
}
if( isVisible($container2) ){
console.log( true )
clock = true
}
})
})
题目4： 图片懒加载的原理是什么？
- 对于所有的 img 标签，把真实的地址放入自定义属性data-img
- 当滚动页面时，检查页面所有的 img 标签，看看这个标签是否出现到我们的视野，当出现在我们的视野时，再去判断它是否已经加载过，如果没有加载过，加载它
题目5： 实现视频中的图片懒加载效果
代码
