一、如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible(node){
var currentTop = window.pageYOffset
var currentHeight = window.innerHeight
var nodeTop = node.offsetTop
if(nodeTop < currentTop + currentHeight && nodeTop > currentTop){
console.log('发现你啦！')
}
}
二、当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
window.onload = function(){
var scroll = document.querySelector('#scroll')
function check(node){
var currentTop = window.pageYOffset
var currentHeight = window.innerHeight
var nodeTop = node.offsetTop
if(nodeTop < currentTop + currentHeight && nodeTop > currentTop){
return true
}
return false
}
window.onscroll = function(){
if(check(scroll)){
console.log(true)
}
}
}
三、当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
window.onload = function(){
var scroll = document.querySelector('#scroll')
function check(node){
var currentTop = window.pageYOffset
var currentHeight = window.innerHeight
var nodeTop = node.offsetTop
if(nodeTop < currentTop + currentHeight && nodeTop > currentTop){
return true
}
return false
}
window.onscroll = function(){
if(scroll.classList.contains('appear') && check(scroll)){
scroll.classList.add('appear')
console.log(true)
}
}
}
四、 图片懒加载的原理是什么？
只有当图片容器出现在用户的可视范围内或者接近该范围时，才向服务器请求该图片。
