進(jìn)階16

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

function isVisible($node) {
            var scrollTop = $(window).scrollTop();
            var windowHeight = $(window).height();    // Returns height of browser viewpot
            var offsetTop = $node.offset().top;   // 目標(biāo)位置到頁面頂部的高度 

            if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
                return true;
            }
            return false;
        }

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

$(window).on("scroll", function() {
    if( isVisible($node1)) {
        console.log("true");
    }
})
function isVisible($node) {
            var scrollTop = $(window).scrollTop();
            var windowHeight = $(window).height();    // Returns height of browser viewpot
            var offsetTop = $node.offset().top;   // 目標(biāo)位置到頁面頂部的高度 

            if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
                return true;
            }
            return false;
        }

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

$(window).on("scroll", function() {
    isVisible($node1);
})
var flag = true;
    function isVisible($node) {
            var scrollTop = $(window).scrollTop();
            var windowHeight = $(window).height();    // Returns height of browser viewpot
            var offsetTop = $node.offset().top;   // 目標(biāo)位置到頁面頂部的高度 

            if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
                if(flag) {
                    console.log(flag);
                    flag = false;
                }
                return true;
            }
            return false;
        }

題目4: 圖片懶加載的原理是什么?
1、對(duì)于所有的img 標(biāo)簽,把真實(shí)的地址放入自定義屬性data-img
2、當(dāng)滾動(dòng)頁面時(shí),檢查頁面所有的img標(biāo)簽,看看這個(gè)標(biāo)簽是否出現(xiàn)在我們
的視野時(shí),再去判斷它是否已經(jīng)加載過,如果沒有加載過,加載它
題目5: 實(shí)現(xiàn)視頻中的圖片懶加載效果
預(yù)覽
代碼

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 題目1:如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個(gè)函數(shù) isVisib...
    cheneyzhangch閱讀 370評(píng)論 0 0
  • 題目1:如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個(gè)函數(shù) isVisib...
    我七閱讀 186評(píng)論 0 0
  • 題目1:如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個(gè)函數(shù) isVisib...
    饑人谷_桶飯閱讀 291評(píng)論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,121評(píng)論 1 92
  • 1. 如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個(gè)函數(shù) isVisibl...
    饑人谷_流水閱讀 132評(píng)論 0 0

友情鏈接更多精彩內(nèi)容