問答

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

 function isVisible($node){ }

//

<script type="text/javascript">
    function isVisible($node) {
        var $scrollTop = $(window).scrollTop(),
                $winH = $(window).height(),
                $nodeTop = $node.offset().top;
        if ($nodeTop < ($scrollTop + $winH)) {
            console.log('true')
        } else {
            console.log('false')
        }
    }
</script>

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

<div class="aa" style="height: 2000px;">1</div>
<div class="bb">2</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
    var $node = $('.bb');
    function isVisible($node) {
        $(window).on('scroll', function () {
            var top = $node.offset().top;
            var winH = $(window).height();
            var scrollH = $(window).scrollTop();
            if (top < winH + scrollH) {
                console.log(true)
            } else {
                console.log(false)
            }
        })
    }
    isVisible($node);
</script>

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

<div class="aa" style="height: 2000px;">1</div>
<div class="bb">2</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
    var $node = $('.bb');
    function isVisible($node) {
        $(window).on('scroll', function () {
            var $top = $node.offset().top,
                $winH = $(window).height(),
                $scrollH = $(window).scrollTop();

            if ($top < $winH + $scrollH) {
                if($node.attr('isLoaded')){return}
                console.log(true)
                $node.attr('isLoaded', true);
            } else {
                console.log(false)
            }
        })
    }
    isVisible($node);
</script>

4、圖片懶加載的原理是什么？
首先設(shè)置所有圖片的背景圖為空白的（這是為了避免一些瀏覽器可能對沒有圖片的地方顯示“X”造成視覺上的不完美），空白圖片的URL保持一致（瀏覽器就不會重復(fù)加載消耗資源），當(dāng)圖片出現(xiàn)在窗口視線中的時候，執(zhí)行圖片鏈接地址的替換（如何判斷圖片出現(xiàn)在視線中呢：目標(biāo)元素的offset().top 小于 $(window).height() + $(window).scrollTop() ）。

翻到顯示18的時候出現(xiàn)“回到頂部”按鈕，因為setTimeout所以會延遲500毫秒出現(xiàn)
JQ的懶加載
本地apach測試通過
待續(xù)......