問答

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

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.當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。每次出現都在控制臺打印 true 。用代碼實現

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.當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。在元素第一次出現時在控制臺打印 true，以后再次出現不做任何處理。用代碼實現

 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.圖片懶加載的原理是什么？

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

代碼

1.實現如下回到頂部效果

當頁面滾動到一定距離時，窗口右下角會出現回到頂部按鈕，點擊按鈕頁面會滾動到頂部。
預覽1
demo

2.實現如下圖片懶加載效果

預覽2
demo

3.實現如下無限滾動效果。

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