圖片懶加載一般運用到圖片較多的頁面，電商類的頁面一般都有圖片懶加載處理。
步驟：
- 將要懶加載的網頁中的圖片都設為同一張loading圖片；
- 給圖片設置data-src的屬性，保存圖片的真實地址；
- 當圖片滾動到可視區域時，將圖片src替換為真實地址。
結構層
<ul> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> </ul>
表現層
容器尺寸最好設置成圖片尺寸，避免layout，或者將圖片設置成真實地址圖片的大小
li{height:300px;}
行為層
下面這句判斷圖片進入可視區域
obj.getBoundingClientRect().top< document.documentElement.clientHeight
頁面加載后首屏自動加載一次，不然進入頁面滾動前的圖片全是loading圖片
window.onload = function() { lazyload(); };
完整代碼，已將需要注意的點都加上注釋了：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lazyLoad nick</title>
<style>
/*容器尺寸最好設置成圖片尺寸，避免layout*/ li{height:300px;}
</style>
</head>
<body>
<ul>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
</ul>
<script> window.onscroll = function() {//滾動加載
lazyload(); }; window.onload = function() {//頁面加載后首屏自動加載一次
lazyload(); }; function lazyload(lazy) { lazy = lazy||50;//提前加載的距離
var images = document.images,i = 0, len = images.length; for (; i < len; i++) { var obj = images[i]; // obj.getBoundingClientRect().top< document.documentElement.clientHeight 判斷元素滾動到可視區返回true
if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) { obj.isLoad = true;//判斷首次加載
imageLoaded(obj, obj.dataset.src); } } } function imageLoaded(obj,src){//img加載完成在設置src，避免img從頂部加載到尾部出現的白板
var img = new Image(); img.onload = function() { obj.src = img.src; }; img.src = src; } </script>
</body>
</html>
純屬沒事亂搗騰，有建議或意見請q我！