文章轉載自：http://imziv.com/blog/article/read.htm?id=75
圖片異步加載功能是現在web中非常常見的一個針對web做優化的方法。尤其是在移動端，面對大量的圖片列表的時候，如果沒有做相應的優化，會直接導致頁面滑動和加載的卡頓，而且用戶會莫名的發現當前應用占用的流量會很大，因為他可能都沒有瀏覽到很多圖片，而程序就自動加載了所以的圖片，對於一個流量吃緊的人來講，這個也是很討厭的。所以實現按瀏覽需求加載時十分有必要的。
其實實現圖片異步加載的核心思路十分簡單，就是通過判斷當圖片元素是否出現在視窗范圍內后，則去加載圖片資源，否則不加載。所以我們需要首先解決判斷img元素是否處於視圖范圍內的這個核心問題。讓我們看看下面的圖：
通過抓取img元素，js提供了相應的方法讓我們可以獲取到img元素距離視圖top，和left的距離，viewport的高度和寬度等數據。然后通過監聽窗口滾動事件，當頁面滾動的時候，我們就去動態檢測img元素的top和left值，與視窗的高度和寬度作比較，從而判斷當前的img是否處於視窗范圍。計算如下：
處於垂直范圍： 圖片距離視窗頂部距離 > 0 && 圖片距離視窗頂部距離 <= 視窗高度
處於水平范圍： 圖片距離視窗左邊距離 > 0 && 圖片距離視窗左邊距離 <= 視窗寬度
解決了這個判斷圖片在可視范圍內的核心問題后，那么其他的問題都是否簡單了。我們看下詳細代碼：
獲取視窗的高度和寬度：
var _viewPortHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0), _viewPortWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);是否處於垂直范圍
function isOnVerticalViewPort(ele) { var rect = ele.getBoundingClientRect(); // 獲取距離視窗的位置信息 return rect.top > 0 && rect.top <= _viewPortHeight; };是否處於水平范圍
function isOnHorizontalViewPort(ele) { var rect = ele.getBoundingClientRect(); return rect.left > 0 && rect.left <= _viewPortWidth; };有了這核心代碼，我們只需要在滾動事件觸發后，去動態的判斷img元素了, 判斷的示例代碼如下：
function load(images) { for (var i = 0; i < images.length; i++) { var img = images[i]; if (isOnVerticalViewPort(img) && isOnHorizontalViewPort(img)) { var url = img.getAttribute('lz-src'); // 獲取圖片資源的地址 img.setAttribute("src", url); img.isload = true; // 加載過后的圖片設置加載標記，以免重復加載 } } }在html頁面中的img元素的引用：
<img lz-src="http://s.cn.bing.net/az/hprichbg/rb/SkunkKit_ZH-CN10809503929_1920x1080.jpg"></img>通過給img元素添加lz-src標記，告訴異步腳本，這個元素需要異步加載圖片。
監聽滾動事件
var images = document.querySelectorAll('img[' + lz-src + ']'); // 按標記獲取圖片元素 window.addEventListener("scroll", function(e) { load(images); }, false);