1.如何判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）拳缠。寫一個函數(shù)isVisible實現(xiàn)
function isVisible($cur){
var winH = $(window).height(),//窗口高度
curH = $cur.offset().top,//元素距離窗口高度
scrollH = $(window).scrollTop()墩新；//滾動距離
if (curH < scrollH + winH){
return true;
}else{
return false;
}
}
2.當窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍窟坐。每次出現(xiàn)都在控制臺打印 true 海渊。用代碼實現(xiàn)
$(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.當窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍勃痴。在元素第一次出現(xiàn)時在控制臺打印 true馒胆，以后再次出現(xiàn)不做任何處理。用代碼實現(xiàn)
var isVis = false; //設置一個標志位
$(window).on("scroll",function(){
if(!isVis){
isVisible($("div")); //不可見才進入isVisible函數(shù)
}
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;//第一次出現(xiàn)就設置為true
return true;
}else{
return false;
}
}
4.圖片懶加載的原理是什么？
當網(wǎng)頁瀏覽時出現(xiàn)很多的圖片時芙盘，特別是某些電商網(wǎng)站驯用，如果同時全部加載會非常慢，效率低儒老，可能會導致網(wǎng)頁卡死的情況蝴乔，因此可以先加載網(wǎng)頁窗口可視范圍內(nèi)的圖片，其他圖片不加載驮樊，等滾動到可視范圍內(nèi)再加載其他圖片薇正。
- 判斷圖片是否可見：如果：屏幕滾動的高度+窗口高度 > 圖片到頁面頂部的距離，那么該圖片即是可見的囚衔；
然后給每一個圖片的src設一個相同的初始值挖腰，這樣只會發(fā)起一次請求，如果不設置练湿，可能會出現(xiàn)“X”就很難看猴仑。當圖片是可見時，再修改圖片的src屬性肥哎，這時辽俗，圖片的內(nèi)容就能被加載出來了。
