一、如何判斷一個元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個函數(shù) isVisible實現(xiàn)
function isVisible(node){
var currentTop = window.pageYOffset
var currentHeight = window.innerHeight
var nodeTop = node.offsetTop
if(nodeTop < currentTop + currentHeight && nodeTop > currentTop){
console.log('發(fā)現(xiàn)你啦!')
}
}
二、當(dāng)窗口滾動時,判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 。用代碼實現(xiàn)
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)
}
}
}
三、當(dāng)窗口滾動時,判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印 true,以后再次出現(xiàn)不做任何處理。用代碼實現(xiàn)
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)
}
}
}
四、 圖片懶加載的原理是什么?
只有當(dāng)圖片容器出現(xiàn)在用戶的可視范圍內(nèi)或者接近該范圍時,才向服務(wù)器請求該圖片。