1.如何判斷一個元素是否出現在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個函數isVisible實現
function isVisible($cur){
var winH = $(window).height(),//窗口高度
curH = $cur.offset().top,//元素距離窗口高度
scrollH = $(window).scrollTop()；//滾動距離
if (curH < scrollH + winH){
return true;
}else{
return false;
}
}
2.當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。每次出現都在控制臺打印 true 。用代碼實現
$(window).on('scroll',function(){
isVisible($("div"));
});
function isVisible($cur){
var winH = $(window).height(),//窗口高度
curH = $cur.offset().top,//元素距離窗口高度
scrollH = $(window).scrollTop()；//滾動距離
if (curH < scrollH + winH){
console.log('true');
return true;
}else{
return false;
}
}
3.當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。在元素第一次出現時在控制臺打印 true，以后再次出現不做任何處理。用代碼實現
var isVis = false; //設置一個標志位
$(window).on("scroll",function(){
if(!isVis){
isVisible($("div")); //不可見才進入isVisible函數
}
else{
return; //一旦標志位為true，那么就不做任何處理
}
});
function isVisible($cur){
var winH = $(window).height(),//窗口高度
curH = $cur.offset().top,//元素距離窗口高度
scrollH = $(window).scrollTop()；//滾動距離
if (curH < scrollH + winH){
console.log('true');
isVis = true;//第一次出現就設置為true
return true;
}else{
return false;
}
}
4.圖片懶加載的原理是什么？
當網頁瀏覽時出現很多的圖片時，特別是某些電商網站，如果同時全部加載會非常慢，效率低，可能會導致網頁卡死的情況，因此可以先加載網頁窗口可視范圍內的圖片，其他圖片不加載，等滾動到可視范圍內再加載其他圖片。
- 判斷圖片是否可見：如果：屏幕滾動的高度+窗口高度 > 圖片到頁面頂部的距離，那么該圖片即是可見的；
然后給每一個圖片的src設一個相同的初始值，這樣只會發起一次請求，如果不設置，可能會出現“X”就很難看。當圖片是可見時，再修改圖片的src屬性，這時，圖片的內容就能被加載出來了。
