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

function isVisible($node){
        if ($(window).scrollTop() >= ($node.offset().top - $(window).height()) && 
            $(window).scrollTop() <= ($node.offset().top + $node.height())) {
            console.log('在可視窗口中');
            return;
        } 
    }

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

$(window).on('scroll', function(){
        isVisible($node);
    });
    function isVisible($node){
        if ($(window).scrollTop() >= ($node.offset().top - $(window).height()) && 
            $(window).scrollTop() <= ($node.offset().top + $node.height())) {
            console.log('true');
            return;
        } 
    }

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

$(window).on('scroll', function(){
        if (!$box.data('data-show')) {
            isVisible($node);
        }
    });
    function isVisible($node){
        if ($(window).scrollTop() >= ($node.offset().top - $(window).height()) && 
            $(window).scrollTop() <= ($node.offset().top + $node.height())) {
            console.log('true');
            $node.data('data-show', true);
            return;
        } 
    }

• 圖片懶加載的原理是什么？
• 圖片的懶加載(動態加載)就是通過讀取img元素，然后獲得img元素的data-src屬性的值賦予動態創建的圖片的src，從而實現了圖片的創建。

<img src="" data-src="url" alt="">

• 實現如下回到頂部效果（難度: ***）當頁面滾動到一定距離時，窗口右下角會出現回到頂部
  按鈕，點擊按鈕頁面會滾動到頂部。效果預覽
  實現效果

• 實現如下圖片懶加載效果 (難度：***)效果預覽
  實現效果

• 實現如下無限滾動效果(難度：****)。當頁面滾動會無限加載數據展示到頁面。當鼠標放置上去會變色提示
  ：當底部加載更多按鈕出現時，通過 ajax 發送請求獲取數據，append 到容器里。事件綁定使用代理方式。效果預覽ps：自己實現效果后，可參考 demo 里的注釋
  實現效果

本博客版權歸 本人和饑人谷所有，轉載需說明來源