參考文章：http://blog.csdn.net/itzhongzi/article/details/77466779
http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html
####1、什麼是圖片懶加載
懶加載其實就是延遲加載，是一種對網頁性能優化的方式，比如當訪問一個頁面的時候，優先顯示可視區域的圖片而不一次性加載所有圖片，當需要顯示的時候再發送圖片請求，避免打開網頁時加載過多資源。
####2、懶加載原理與實現
我們可以將不需要在頁面打開時就立即顯示的圖片的src設置爲一個1px*1px的loading圖或是不設置src或是設置一個自定義屬性data-src(個人認爲這種方法方便用js進行批量操作)
<img id='image' data-src='image.png' alt='loading'/>
<script>
document.getElementById('image').src = document.getElementById('image').dataset.src;
</script>
接下來就要判斷圖片是否在可視區了。
#####方法一
1、通過document.documentElement.clientHeight獲取屏幕可視窗口高度
2、通過element.offsetTop獲取元素相對於文檔頂部的距離
3、通過document.documentElement.scrollTop獲取瀏覽器窗口頂部與文檔頂部之間的距離，也就是滾動條滾動的距離
然後判斷②-③<①是否成立，如果成立，元素就在可視區域內。
#####方法二
通過getBoundingClientRect()方法來獲取元素的大小及位置，這個方法返回一個名爲ClientRect的DOMRect對象，包含了top、right、bottom、left、width、height這些值。
top:當前時刻元素上邊界距離可視區域頂部的距離；
right：當前時刻元素右邊界距離可視區域左側的距離；
bottom：當前時刻元素下邊界距離可視區域頂部的距離；
left：當前時刻元素左邊界距離可視區域左側的距離；
width = right - left;
height = bottom - top;
注：因各瀏覽器默認內邊距不同故所得結果會有所不同。
所以當getBoundingClientRect().top <= clientHeight時，圖片是位於可視區域內的。（在實際過程中不妨讓clientHeight+100實現適時提前加載）
由於scroll事件密集發生，計算量大，容易造成瀏覽器性能問題，可使用節流和防抖來優化。
#####方法三
var io = new IntersectionObserver(callback, option);
上面代碼中，IntersectionObserver是瀏覽器原生提供的構造函數，接受兩個參數：callback是可見性變化時的回調函數，option是配置對象（該參數可選）。
構造函數的返回值是一個觀察器實例。實例的observe方法可以指定觀察哪個 DOM 節點。
// 開始觀察
io.observe(document.getElementById('example'));
// 停止觀察
io.unobserve(element);
// 關閉觀察器
io.disconnect();
上面代碼中，observe的參數是一個 DOM 節點對象。如果要觀察多個節點，就要多次調用這個方法。
io.observe(elementA);
io.observe(elementB);
目標元素的可見性變化時，就會調用觀察器的回調函數callback。
callback一般會觸發兩次。一次是目標元素剛剛進入視口（開始可見），另一次是完全離開視口（開始不可見）。
