回答：
1.何判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間舟误，肉眼可視）造垛。寫一函數(shù) isVisible實現(xiàn)
function isVisible($node){
var $windosHeight = $(window).height(),//窗口高度
$windosScrollTop = $(window).scrollTop(),//窗口滾動高度
$nodeHeight = $($node).height(), //節(jié)點cotentarea 高度
$nodeOffsetTop = $($node).offset().top; //節(jié)點距根節(jié)點高度
if( $windosHeight+$windosScrollTop > $nodeOffsetTop && $windosScrollTop < $nodeOffsetTop+$nodeHeight) {
//在可視區(qū)域內(nèi)
return true
}
return false;
}
元素距離根元素的高度 < 窗口高度 + 窗口滾動高度魔招；
窗口滾動高度 < 元素距離根元素的高度 + 元素本身高度；
2.當窗口滾動時筋搏，判斷一個元素是不是出現(xiàn)在窗口可視范圍仆百。每次出現(xiàn)都在控制臺打印 true 。用代碼實現(xiàn)
$(window).on('scroll', function() {
if(isVisible($node)) {
console.log('true');
}
})
3.當窗口滾動時奔脐，判斷一個元素是不是出現(xiàn)在窗口可視范圍俄周。在元素第一次出現(xiàn)時在控制臺打印 true，以后再次出現(xiàn)不做任何處理髓迎。用代碼實現(xiàn)
<script>
var $visible = $('.visible');
var flag = true;
$(window).on('scroll', function() {
if(flag) {
isVisible($visible);
}
})
function isVisible($node) {
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight(true);
if (windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight) {
console.log('true');
flag = false;
return true;
}else{
return false;
}
}
</script>
4.圖片懶加載的原理是什么峦朗？
當用戶往下滾動窗口，圖片進入window窗口（用戶可見）就會加載排龄。正常的時候圖片地址是放在自定義屬性上波势，用戶滾動窗口后才將地址賦值給src，這樣優(yōu)化了代碼的性能。
