題目1：如何判斷一個元素是否出現在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個函數 isVisible
實現
function isVisible($img){
var $imgheight = $img.offset().top;
var height = $(window).height();
var scrollHeight = $(window).scrollTop();
if($imgheight < height + scrollHeight && $imgheight > scrollHeight){
return true;
}
return false;
}
題目2：當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。每次出現都在控制臺打印 true 。用代碼實現
$(window).on('scroll',function(){
lazingLoad();
})
function lazingLoad(){
$img.each(function(){
if( isVisible($(this))){
console.log(true);
}})
}
function isVisible($img){
var $imgheight = $img.offset().top;
var height = $(window).height();
var scrollHeight = $(window).scrollTop();
if($imgheight < height + scrollHeight && $imgheight > scrollHeight){
return true;
}
return false;
}
題目3：當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。在元素第一次出現時在控制臺打印 true，以后再次出現不做任何處理。用代碼實現
var occur;
$(window).on('scroll',function(){
lazingLoad();
})
function lazingLoad(){
$img.each(function(){
if($(this).attr('occur') == '1'){
return;
}
if(isVisible($(this))){
console.log(true);
$(this).attr('occur','1');
})
}
function isVisible($img){
var $imgheight = $img.offset().top;
var height = $(window).height();
var scrollHeight = $(window).scrollTop();
if($imgheight < height + scrollHeight && $imgheight > scrollHeight){
return true;
}
return false;
}
題目4： 圖片懶加載的原理是什么？
懶加載是一種思路，目的是是優化性能，在用戶需要的時候顯示信息。
核心邏輯：
- 判斷元素是否在用戶眼中
- 判斷元素是否加載過
- 加載
判斷元素是否在肉眼位置的邏輯
1.元素的高度（top）是否大于 屏幕垂直滾動的距離
2.元素的高度（top）是否小于 屏幕垂直滾動的距離加上屏幕文檔的高度
判斷圖片是否加載過
可以自定義一個屬性，加載過改為true,沒加載改為fasle
注：
數據懶加載
是在網頁屏幕底下埋下一下看不到的節點，然后判斷節點是否在用戶眼中，出現的話發送AJAX請求，加載數據拼裝HTML到文檔，這樣就實現了數據不間斷的情況，除非AJAX請求返回沒有數據了。
題目5： 實現視頻中的圖片懶加載效果
https://jsxiaocainiao.github.io/demos/lazingloading/pic.html
