1、當(dāng)窗口滾動時职恳，判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true
function isVisible($node){
$(window).on('scroll',function(){
var scrollTop = $(this).scrollTop()
var windowHeight = $(this).height()
var top = $node.offset().top
//元素出現(xiàn)在窗口可見范圍內(nèi)色徘，console打印出true
if(scrollTop+windowHeight>top){
console.log('true')
}
})
}
2操禀、當(dāng)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍斤寂。在元素第一次出現(xiàn)時在控制臺打印true揪惦，以后再次出現(xiàn)不做任何處理。
$(window).on('scroll',function(){
if(isVisible($node.not('.show'))){
console.log('true')
$(this).addClass('show')
}
})
function isVisible($node){
var scrollTop = $(this).scrollTop()
var windowHeight = $(this).height()
var offsetTop = $node.offset().top
var nodeHeight = $node.offset().top
if(scrollTop+windowHeight>offsetTop && scrollTop<offsetTop + nodeHeight){
return true
}else{
return false
}
3溪猿、圖片懶加載原理
圖片的懶加載就是將圖片較多的頁面進(jìn)行圖片依據(jù)滾動到當(dāng)前頁面的條件加載纫塌。在加載之前將圖片使用空白或占位圖加載，在滾動條滾動至圖片位置出現(xiàn)在瀏覽器視圖窗口中時進(jìn)行加載措左，從而避免了同時加載大量圖片引起的服務(wù)端返回資源過多發(fā)生阻塞的情況
實現(xiàn)的核心要點：
- 加載圖片
可以將真實的圖片資源定義到自定義屬性data-src中媳荒，當(dāng)符合加載條件時，將data-src的值提取賦值給img的src - 判斷在何種狀態(tài)下加載
臨界位置：
scrollTop(滾動距離) + windowHeight(瀏覽器窗口大小) > offsetTop(元素距離scrollTop=0的距離)
scrollTop < offsetTop + height(元素占據(jù)高度）
