1.如何判斷一個元素是否出現在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個函數 isVisible實現
- 首先，要知道三個高度之間的關系，
窗口的高度可以通過$(window).height()獲得，
窗口滾動的高度可以通過$(window).scrollTop()獲得，
以及目標元素距離窗口頂部的高度距離，可以通過目標元素的$node.offset().top獲得，
當元素距離頂部的高度<窗口的高度+滾動的高度，它是可見的，反之，則不可見。
function isVisible($node){
var offset=$node.offset().top;
var scrollTop=$(window).scrollTop();
winH=$(window).height();
if(offset>scrollTop+winH){
alert('不在可視范圍內')
}else{
alert('在可視范圍內')
}
}
2.當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。每次出現都在控制臺打印 true 。用代碼實現
$(window).on('scroll',function(){
if(isVisible($node)){
console.log('true')
}
})
function isVisible($node){
var offset=$node.offset().top;
var scrollTop=$(window).scrollTop();
winH=$(window).height();
if(offset<scrollTop+winH){
return true
}else{
return false
}
}
3. 當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。在元素第一次出現時在控制臺打印 true，以后再次出現不做任何處理。
-
設置延遲函數延遲執行，并設置標志位，判斷是否滾動，若在幾秒內一直在滾動，就不執行，清處定時器的，反之，則不執行清除定時器
var clock;
$(window).on('scroll',function(){
if(clock){
clearTimeout(clock)
}
var clock=setTimeout(function(){
if(isVisible($node)&&!isLoaded($node)){
console.log('true')
}
},500)
})function isVisible($node){ var offset = $node.offset().top; var scrollTop=$(window).scrollTop(); winH = $(window).height(); if(offset<scrollTop+winH){ return true }else{ return false } } function isLoaded($node){ if(!!$node.data('src')){ return true； }else{ $node.data('src',true); return false; } }
4.圖片懶加載的原理是什么？
- 一般來說一個網頁上會有幾百個張圖片，一張大圖要100K以上,如果一次性同時加載網頁，向服務器發送請求，數據超過10M,這直接會導致服務器忙不過來，因為http協議是只要客戶端發送請求-服務器就會響應，頁面加載卡死，所以為了避免這種情況和性能優化，才出現了懶加載。
- 懶加載的原理是將不在我們瀏覽器的可視窗口的圖片不做加載，等到用戶滾動到這些不在可視區域的圖片時，再去加載它，這會大大優化瀏覽器的性能和用戶體驗
- 懶加載的實現方法：在頁面載入時，將頁面中img標簽的src指向同一張小圖片或白圖，這是為了避免某些瀏覽器當加載不出來圖片時會出現X的丑陋情況，這樣對于服務器來說只發送請求一次，在把真正的url地址放在一個自定義的data-src屬性里，然后在獲取頁面的中的img標簽，遍歷img標簽，并判斷它的位置是否出現在窗口的可視區域內，如果出現在可視區域內那就把真實的url地址賦給src,讓對應的img圖片顯示出現，同時我們還可以對已經加載過的圖片img標簽設置一個為 isLoaded 的屬性，設置為true,這樣在下次執行懶加載的時候就會判斷是否已經加載過，這樣會有效的過濾出已加載的圖片，會大大的優化頁面的加載速度和性能節省。
代碼題
1.代碼1
2.代碼2
3.代碼3
本地測試成功
4.原生JS的回到頂部效果
這是最近學習到了，比jquery感覺效果更好一點，加入定時器有了平滑的過渡到頂部，不會顯得太突然。
