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

function isVisible($node){
        var $scrollTop=$(window).scrollTop();//窗口相對(duì)于滾動(dòng)條頂部的偏移距離
        var $windowHeight=$(window).height();//窗口的高度
        var $nodeOffsetTop=$node.offset().top;//元素在窗口中的高度范圍

        if($windowHeight+$scrollTop>$nodeOffsetTop){
            return true;
        }else{
            return false;
        }
    }

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

<script>
        function isVisible($node){
            var $scrollTop=$(window).scrollTop();
            var $windowHeight=$(window).height();
            var $nodeOffsetTop=$node.offset().top;

            if($windowHeight+$scrollTop>$nodeOffsetTop){
                return true;
            }else{
                return false;
            }
        }
                         
        $(window).on("scroll",function(){
            var result=isVisible($("p"));
            if(result){
                console.log(result);
            }
        });
    </script>

預(yù)覽效果

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

<script>
        function isVisible($node){
            var $scrollTop=$(window).scrollTop();
            var $windowHeight=$(window).height();
            var $nodeOffsetTop=$node.offset().top;

            if($windowHeight+$scrollTop>$nodeOffsetTop){
                return true;
            }else{
                return false;
            }
        }   
        var cansee=false;           
        $(window).on("scroll",function(){
            if(cansee==true){
                return;
            }
            var result=isVisible($("p"));
            if(result){
                console.log(result);
                cansee=true;
            }       
        });
    </script>

預(yù)覽效果

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

1.為什么要懶加載
如果一個(gè)頁面包含了非常多的圖片，當(dāng)用戶打開這個(gè)頁面的時(shí)候，瀏覽器需要一次性加載這些圖片，花費(fèi)很長時(shí)間，也容易造成瀏覽器崩潰卡死，影響用戶體驗(yàn)。因此，當(dāng)頁面又大量圖片時(shí)，需要用到懶加載。
2.懶加載原理
瀏覽器只加載用戶可視區(qū)域的圖片，當(dāng)用戶下拉瀏覽器時(shí)，才加載下一部分圖片。把真實(shí)的圖片地址存放在一個(gè)自定義屬性中，可以用data-src來存放。<img src="loading.gif" data-src="http://xxx.ooo.com" />當(dāng)瀏覽器下拉到該圖片的可視區(qū)域時(shí)，在把data-src里面的圖片地址賦給src屬性里面。

本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請(qǐng)注明來源。