題目1：如何判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）楼誓。寫一個函數(shù) isVisible實現(xiàn)
function isVisible($node) {
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height(); // Returns height of browser viewpot
var offsetTop = $node.offset().top; // 目標位置到頁面頂部的高度
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
return true;
}
return false;
}
題目2：當窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍名挥。每次出現(xiàn)都在控制臺打印 true 疟羹。用代碼實現(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; // 目標位置到頁面頂部的高度
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
return true;
}
return false;
}
題目3：當窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍禀倔。在元素第一次出現(xiàn)時在控制臺打印 true榄融，以后再次出現(xiàn)不做任何處理。用代碼實現(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; // 目標位置到頁面頂部的高度
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
if(flag) {
console.log(flag);
flag = false;
}
return true;
}
return false;
}
題目4： 圖片懶加載的原理是什么救湖？
1愧杯、對于所有的img 標簽，把真實的地址放入自定義屬性data-img
2鞋既、當滾動頁面時力九，檢查頁面所有的img標簽，看看這個標簽是否出現(xiàn)在我們
的視野時涛救，再去判斷它是否已經(jīng)加載過畏邢，如果沒有加載過，加載它
題目5： 實現(xiàn)視頻中的圖片懶加載效果
預覽
代碼
