1- 如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）坚俗。用函數(shù)isVisible實(shí)現(xiàn)

function isVisible($node){
 }

函數(shù)：

function isVisible($node){
    var windowHeight = $(window).height(), //窗口的高度
        scrollTop = $(window).scrollTop(), //窗口的滾動(dòng)距離
        nodeHeight = $node.outerHeight(true), //元素的高度
        nodeOffset = $node.offset().top;  //元素到頁(yè)面頂部的距離
    if(scrollTop+windowHeight>nodeOffset && scrollTop<nodeOffset+nodeHeight){
             $node.addClass('ok'); //確定出現(xiàn)的元素添加class'ok'
             return true
    }else{return false}
}

2- 當(dāng)窗口滾動(dòng)時(shí)祸泪，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍酗钞。每次出現(xiàn)都在控制臺(tái)打印 true 腹忽。代碼實(shí)現(xiàn)：

function isVisible($node) {
            var winHe = $(window).height();
            var scrollTop = $(window).scrollTop();
            var offsetTop = $node.offset().top;
            var height = $node.innerHeight();
            if ( (winHe + scrollTop ) > offsetTop && (scrollTop < offsetTop + height) ) {
                return true;
            }else {
                return false;
            }
}
var p = $('p');
$(window).on('scroll',function(){
  if (isVisible(p)) {
  console.log('true');
}else {
 console.log('false'); 
}
})

3- 當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍算吩。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true留凭，以后再次出現(xiàn)不做任何處理。代碼實(shí)現(xiàn)：

function isVisible($node) {
            var winHe = $(window).height();
            var scrollTop = $(window).scrollTop();
            var offsetTop = $node.offset().top;
            var height = $node.innerHeight();
            if ( (winHe + scrollTop ) > offsetTop && (scrollTop < offsetTop + height) ) {
                return true;
            }else {
                return false;
            }
}
var $name = $('p').eq(0);
$(window).on('scroll',function(){
  result($name);
})
function result($node) {
  if (isVisible($node) && !$node.hasClass('show')) {
  console.log('true');
    $node.addClass('show');
}
}

4- 圖片懶加載的原理

• 懶加載(Load On Demand)是一種獨(dú)特而又強(qiáng)大的數(shù)據(jù)獲取方法,它能夠在用戶滾動(dòng)頁(yè)面的時(shí)候自動(dòng)獲取更多的數(shù)據(jù),而新得到的數(shù)據(jù)不會(huì)影響原有數(shù)據(jù)的顯示,同時(shí)最大程度上減少服務(wù)器端的資源耗用偎巢。
• 如何加載圖片
  • 自定義屬性 data-src="圖片地址"
  • 需要加載的時(shí)候(待加載圖片位置在用戶視線范圍內(nèi))將圖片地址填入img標(biāo)簽的src
  • url = img.getAttribute('data-src')
  • img.setAttribute('src', url)
• 如何判斷用戶看到圖片(待加載圖片位置在用戶視線范圍內(nèi))
  • 關(guān)鍵:
    • $node.offset().top 元素距離document頂端的距離
    • $(window).height() 瀏覽器窗口的高度
    • $(document).scrollTop() document滑動(dòng)的距離
  • 元素出現(xiàn)的條件: $(window).height() + $(document).scrollTop() >= $node.offset().top

5- 實(shí)現(xiàn)圖片懶加載效果

懶加載效果
代碼

6- 實(shí)現(xiàn) 新聞自動(dòng)懶加載效果 （這里是參考代碼， 其中html里的為前端代碼兼耀， js 里的內(nèi)容為 router.js里的后端代碼压昼， 也可參考其他視頻)

其他參考：
新聞懶加載1
懶加載 新聞2
新聞懶加載3

• 代碼
  圖片懶加載代碼