1.如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間屿聋，肉眼可視）机久。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)
function isVisible($node){
var winH = $(window).height(),
scrollH = $(window).scrollTop(),
nodeH = $node.offset().top;
if(winH + scrollH > nodeH && scrollH > nodeH){
return true;
}else{
return false
}
}
2.當(dāng)窗口滾動(dòng)時(shí)臭墨，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 膘盖。用代碼實(shí)現(xiàn)
function isVisible($node){
var winH = $(window).height(),
scrollH = $(window).scrollTop(),
nodeH = $node.offset().top;
if(winH + scrollH > nodeH && scrollH > nodeH){
return true;
}else{
return false;
}
}
$(window).on('scroll', function(){
var cur = $('.btn');
if(isVisible(cur)){
console.log("true");
}
});
3.當(dāng)窗口滾動(dòng)時(shí)胧弛，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true侠畔，以后再次出現(xiàn)不做任何處理结缚。用代碼實(shí)現(xiàn)
function isVisible($node){
var winH = $(window).height(),
scrollH = $(window).scrollTop(),
nodeH = $node.offset().top;
if($node.data('data-check')){
if(winH + scrollH > nodeH && scrollH > nodeH){
$node.data('data-check', true);
console.log("true");
}else{
return false;
}
}
}
$(window).on('scroll', function(){
var cur = $('.btn');
isVisible(cur);
}
});
4.圖片懶加載的原理是什么？
懶加載也叫延遲加載软棺，先在img src中放一張占位符圖片红竭，而真實(shí)的圖片地址存放在相對應(yīng)一個(gè)屬性 data-img(后綴img可以自定義)中，這樣的話頁面加載的時(shí)候只加載src地址，不會(huì)對屬性的圖片真正地址加載茵宪，滾動(dòng)時(shí)候判斷待加載的資源相對于瀏覽器頂端的距離最冰，可視區(qū)域相對于瀏覽器頂端的距離如果為true的話 則把相對應(yīng)的data-img值賦值給src否則不加載。
