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

        function isVisible(ele) {
            var scrollTop = $(document).scrollTop();//滾動距離
            var h = $(window).height();//可視窗口的高度
            var offsetTop = ele.offset().top;//目標元素距離文檔頂部的距離
            if(offsetTop < h + scrollTop && scrollTop < offsetTop){
                return true;
            }
            return false;
        }

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

任務鏈接

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

任務代碼

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

當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑不設置，只有當圖片出現在瀏覽器的可視區域內時，才設置圖片正真的路徑，讓圖片顯示出來。這就是圖片懶加載。
使用這個技術的原因：一些大型網站圖片資源較多，如果資源一次請求完畢，會造成頁面加載速度漫長；并且會造成服務器的壓力較大，吃不消。而利用懶加載的原理可以在用戶需要看到圖片的時候，發送請求加載圖片，優點不言而喻。
原理：通過監聽頁面的滾動，實時獲得滾動的距離scrollSize，并獲得需要展現的內容距離文檔頂部或左邊的距離大小offsetTop或offsetLeft；以及整個可視窗口的高度h；元素在可視范圍內的條件下，三者的關系應為：

scrollSize+h > offsetTop&& scrollSize<=offsetTop;
//左右滾動同理

這樣就可以通過監聽滾動條件，來選擇是否發送請求加載圖片。

實現視頻中的圖片懶加載效果

任務代碼

實現如下 新聞自動懶加載效果54 （這里是參考代碼258， 其中html里的為前端代碼， js 里的內容為 router.js里的后端代碼， 也可參考往前班級視頻251)

網頁代碼

//router.js代碼
router.get('/getNews', function(req, res) {
    var len = req.query.len;
    var ind = parseInt(req.query.ind);
    var news = [
        {
            link: 'http://view.inews.qq.com/a/20160830A02SEB00',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0',
            title: '中國轟6K研發險些被俄羅斯發動機廠商卡脖子',
            brif:  '近日，轟6K＂戰神＂轟炸機首次公開亮相。在中國...'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '外媒稱中國已經決心造出世界先進的航空發動機',
            brif: '資料圖：2012年11月14日，第九屆中國國際...'
        },
        {
            link: 'http://view.inews.qq.com/a/20160828A007LB00',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0',
            title: '傳奇導彈專家馮·布勞恩：其實到美國后曾被當局忽視',
            brif: '小火箭出品本文作者：邢強博士原文標題：布勞恩博...'
        },
        {
            link: 'http://xw.qq.com/mil/20160830033420/MIL2016083003342001',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0',
            title: '中國空軍演習加快反導能力建設 韓媒：或針對“薩德',
            brif: '中國空軍演習加快反導能力建設 韓媒：或針對“薩德'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '外媒稱中國已經決心造出世界先進的航空發動機',
            brif: '資料圖：2012年11月14日，第九屆中國國際...'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '為了喝酒，應該海軍當年那些水兵也是蠻拼的……',
            brif: '囂張（aggressive）這個詞，腐國海軍當...'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '西媒臆斷老撾“棄華投美” 認為現政府更親越南',
            brif: '西媒臆斷老撾“棄華投美” 認為現政府更親越南'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '中國武警2016年征兵宣傳片震撼首發',
            brif: '中國武警2016年征兵宣傳片震撼首發'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '韓國多次宣稱“一旦開戰三天內消滅朝鮮空軍”，靠譜嗎？',
            brif: '韓國多次宣稱“一旦開戰三天內消滅朝鮮空軍”，靠譜嗎？'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '韓促朝停止詆毀韓國元首 批其喪失最基本禮儀常識',
            brif: '韓促朝停止詆毀韓國元首 批其喪失最基本禮儀常識'
        },
        {
            link: 'http://xw.qq.com/mil/20160830033420/MIL2016083003342001',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0',
            title: '中國空軍演習加快反導能力建設 韓媒：或針對“薩德',
            brif: '中國空軍演習加快反導能力建設 韓媒：或針對“薩德'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '外媒稱中國已經決心造出世界先進的航空發動機',
            brif: '資料圖：2012年11月14日，第九屆中國國際...'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '為了喝酒，應該海軍當年那些水兵也是蠻拼的……',
            brif: '囂張（aggressive）這個詞，腐國海軍當...'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '西媒臆斷老撾“棄華投美” 認為現政府更親越南',
            brif: '西媒臆斷老撾“棄華投美” 認為現政府更親越南'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '中國武警2016年征兵宣傳片震撼首發',
            brif: '中國武警2016年征兵宣傳片震撼首發'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '韓國多次宣稱“一旦開戰三天內消滅朝鮮空軍”，靠譜嗎？',
            brif: '韓國多次宣稱“一旦開戰三天內消滅朝鮮空軍”，靠譜嗎？'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '韓促朝停止詆毀韓國元首 批其喪失最基本禮儀常識',
            brif: '韓促朝停止詆毀韓國元首 批其喪失最基本禮儀常識'
        }
    ];
    var data = [];
    for(var i=len*ind;i<len*(ind+1);i++){
        data.push(news[i]);
    }
    res.send(data);
});