問答

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

function isVisible($node){
        var scrollTop=$(window).scrollTop(), //這是垂直滾動距離
            winH=$(window).height(), //這是窗口的高度，固定的
            offsetTop=$node.offset().top //這是該元素垂直方向的偏移量
        $(window).on('scroll',function(){
            if( (offsetTop<winH+scrollTop)&&(offsetTop>scrollTop) ){
                return true;
            }else{
                return false;
            }
        });
    }

2.當(dāng)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 。用代碼實現(xiàn)

var $p=$('p');
$(window).on('scroll',function(){
    isVisible($p)
});

function isVisible($node){
    var winH=$(window).height(),
        scrollTop=$(window).scrollTop(),
        offsetTop=$node.offset().top;
    if( offsetTop<winH+scrollTop && offsetTop>scrollTop){
        console.log(true);
    }else{
        console.log(false);
    }
}

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

 var $p=$('.test-p');
    $(window).on('scroll',function(){
        if( $p.data('isVisi') ){
            return;
        }else{
            isVisible($p);
        }   
    });

    function isVisible($node){
        var winH=$(window).height(),
            scrollTop=$(window).scrollTop(),
            offsetTop=$node.offset().top;
        if( offsetTop<winH+scrollTop && offsetTop>scrollTop){
            console.log(true);
            $p.data('isVisi',true);
        }else{
            return;
        }
    };

demo

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

原理：當(dāng)網(wǎng)頁瀏覽時出現(xiàn)很多的圖片時，如淘寶，京東，如果同時全部加載出來就會非常慢，效率很低，可能會導(dǎo)致網(wǎng)頁卡死的情況。
解決辦法：直到該圖片出現(xiàn)在用戶的視線范圍內(nèi)時，才加載該圖片。
關(guān)鍵的步驟：
①判斷圖片是否可見：屏幕滾動的高度+窗口高度 > 圖片到頁面頂部的距離，那么該圖片即是可見的；
②轉(zhuǎn)換圖片的可見狀態(tài)：圖片加載是通過圖片的src屬性來控制的。
給每一個圖片的src設(shè)一個相同的初始值，這樣只會發(fā)起一次請求，可以先把圖片的src屬性設(shè)置成缺省圖片。
然后等圖片到窗口可見時，把圖片的src路徑換成真實的src路徑，這樣圖片的內(nèi)容就能被加載出來了。

代碼

1.實現(xiàn)如下回到頂部效果

當(dāng)頁面滾動到一定距離時，窗口右下角會出現(xiàn)回到頂部按鈕，點擊按鈕頁面會滾動到頂部。
預(yù)覽1
demo

2.實現(xiàn)如下圖片懶加載效果

預(yù)覽2
demo

3.實現(xiàn)如下無限滾動效果。

當(dāng)頁面滾動會無限加載數(shù)據(jù)展示到頁面。當(dāng)鼠標(biāo)放置上去會變色
提示：當(dāng)?shù)撞考虞d更多按鈕出現(xiàn)時，通過 ajax 發(fā)送請求獲取數(shù)據(jù)，append 到容器里。事件綁定使用代理方式。
代碼3
demo