題目1：如何判斷一個元素是否出現在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個函數 isVisible
實現
function isVisible($node){
var scrollTop = $(window).scrollTop()//滾動條卷曲的高度
var windowHeight = $(window).height()//可視內容的高度
var offsetTop = $node.offset().top//node的偏移高度
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true
}
return false
}
原理：由此圖片可知：
- 圖片進入可視區域的條件：即是圖片偏移的高度大于滾動條卷曲的高度；
- 圖片即將離開可視區域但還在可視區域的條件：即是圖片偏移的高度大于滾動條卷曲的高度+ 可視區的高度
題目2：當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。每次出現都在控制臺打印 true 。用代碼實現
$(function() {
$(window).scroll(function(){
if(isVisible($node)){
console.log(true);
}
});
})
function isVisible($node){
var scrollTop = $(window).scrollTop()//滾動條卷曲的高度
var windowHeight = $(window).height()//可視內容的高度
var offsetTop = $node.offset().top//node的偏移高度
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true
}
return false
}
題目3：當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。在元素第一次出現時在控制臺打印 true，以后再次出現不做任何處理。用代碼實現
var flag = false
$(function() {
$(window).scroll(function(){
if(isVisible($node) $$ !flag){
console.log(true);
flag = true
}
});
})
function isVisible($node){
var scrollTop = $(window).scrollTop()//滾動條卷曲的高度
var windowHeight = $(window).height()//可視內容的高度
var offsetTop = $node.offset().top//node的偏移高度
//忽略了圖片的高度
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true
}
return false
}
題目4：圖片懶加載的原理是什么？
頁面中的img元素，如果沒有src屬性，瀏覽器就不會發出請求去下載圖片，只有通過javascript設置了圖片路徑，瀏覽器才會發送請求。
懶加載的原理就是先在頁面中把所有的圖片統一使用一張占位圖進行占位，把真正的路徑存在元素的自定義屬性“data-src”里，要用的時候就取出來，再設置
實現流程：當網頁滾動的事件被觸發 -> 執行加載圖片操作 -> 判斷圖片是否在可視區域內且是否已經加載過 -> 在，則動態將data-src的值賦予該圖片的src且加載過便不在加載。
題目5：實現視頻中的圖片懶加載效果
題目6(選做)：實現如下 新聞自動懶加載效果 （這里是參考代碼， 其中html里的為前端代碼， js 里的內容為 router.js里的后端代碼， 也可參考往前班級視頻)
新聞自動懶加載效果
ps:需使用mock
