最近寫加載大量圖片的頁面，由於服務器不給了，不能一次性加載全部圖片，卡卡的，
於是參考很多github的例子以及博客園——“蝸牛闖紅燈”大佬的博客，對頁面進行優化，
當你鼠標拉下，瀏覽到某個div時候，才加載那一塊的圖片，簡稱：
1. 圖片懶加載 lazy load在頁面上的未可視區域可以添加一個滾動條事件，
判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小於後者，優先加載。
什麼是圖片懶加載問題：對於圖片過多的頁面，爲了加速頁面加載速度，
所以很多時候我們需要將頁面內未出現在可視區域內的圖片先不做加載， 等到滾動到可視區域後再去加載。
這樣子對於頁面加載性能上會有很大的提升，也提高了用戶體驗。
2、實現方法<img src="loading.gif" data-src="http://xxx.ooo.com" />
然後將頁面img標籤獲取並保存，開啓一個定時器，遍歷保存的img標籤，
判斷其位置是否出現在了可視區域內。如果出現在可視區域了那麼就把真實的src地址給賦值上。
並且從數組中刪除，避免重複判斷。 那麼你可能會問，如何判斷是否出現在可視區域內嗎？
那就是你可以獲取當前img的相對於文檔頂的偏移距離減去scrollTop的距離，
然後和瀏覽器窗口高度在進行比較，如果小於瀏覽器窗口則出現在了可視區域內了，
反之，則沒有。
如圖，往下面拉會出現白色的圖案，漸變出下一張圖片
如果
1、網速慢，
2、電腦卡
3、圖片識別錯誤等 將會顯示一個小小的gif圖片，顯示正在加載
3、代碼：
主要是三個js：jquery，jquery.lazyload，urchin ，大家找找吧，不行我遲點發網盤或者github
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Lazy Load Enabled With FadeIn Effect</title>
<link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<p>
<h1>Lazy Load(懶加載)</h1><br />
<small>Image lazy loader plugin for jQuery.</small>
<ul id="nav">
<li id="first"><a href="#" class="active">weblog</a></li>
<li><a href="#" class="active">projects</a></li>
</ul>
</p>
</div>
</div>
<div class="entry">
<img src="img/load.gif" data-original="img/one.png" width="750" height="521" alt="京紫1">
<img src="img/load.gif" data-original="img/two.png" width="580" height="937" alt="京紫2">
<img src="img/load.gif" data-original="img/three.png" width="750" height="421" alt="動漫1">
<img src="img/load.gif" data-original="img/four.png" width="510" height="287" alt="丹特麗安">
<img src="img/load.gif" data-original="img/five.png" width="750" height="422" alt="動漫2">
<img src="img/load.gif" data-original="img/six.png" width="800" height="436" alt="月山比呂">
</div>
<script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.lazyload.js?v=3" type="text/javascript" charset="utf-8"></script>
<script src="urchin.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload({
effect : "fadeIn",
});
});
</script>
</body>
</html>
哎，csdn這新版的編譯器都上傳不了相片，只好用貼吧的外鏈....