題目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ù)覽
代碼