一汰扭、如何判斷一個元素是否出現(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)你啦萝毛!')
}
}
二、當窗口滾動時滑黔,判斷一個元素是不是出現(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)
}
}
}
三略荡、當窗口滾動時色查,判斷一個元素是不是出現(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)
}
}
}
四、 圖片懶加載的原理是什么序无?
只有當圖片容器出現(xiàn)在用戶的可視范圍內(nèi)或者接近該范圍時验毡,才向服務器請求該圖片。