1、如何判斷一個元素是否出現在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個函數 isVisible實現

function isVisible($img) {
        var scrollTop = $(window).scrollTop()
        var windowHeight = $(window).height()
        var offsetTop = $img.offset().top
        if (offsetTop  < scrollTop + windowHeight && offsetTop > scrollTop) {
            return true
        }
        return false
 }

2、當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。每次出現都在控制臺打印 true 。用代碼實現

$(window).on('scroll', function() {
    if(isVisible($elem)) {
        console.log('true')
    }
})
function isVisible($node) {
    var nodeT = $node.offset().top
    var nodeH = $node.outerHeight()
    var windowH = $(window).height()
    var scrollT = $(window).scrollTop()
    if(nodeT + nodeH > scrollT  && nodeT < windowH + scrollT) {
        return true
    }
    return false
}

3、當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。在元素第一次出現時在控制臺打印 true，以后再次出現不做任何處理。用代碼實現

var hasVisible = false
$(window).on('scroll', function() {
    if(hasVisible) {
        return
    }
    if(isVisible($elem)) {
        hasVisible = true
        console.log('true')
    }
})
function isVisible($node) {
    var nodeT = $node.offset().top
    var nodeH = $node.outerHeight()
    var windowH = $(window).height()
    var scrollT = $(window).scrollTop()
    if(nodeT + nodeH > scrollT  && nodeT < windowH + scrollT) {
        return true
    }
    return false
}

4、圖片懶加載的原理是什么？

a)對于所有圖片img標簽把真實的地址放入自定義屬性data-src中
b)當頁面滾動時，檢查頁面所有的img標簽，看看這個標簽是否出現到我們的視野，當初出現在我們的視野中時，再去判斷他是否加載過，如果沒有加載，加載他。