最近一個專案裡，遇到一個這樣的需求：這是一個WEBAPP應用，應用所有的邏輯都聚焦在一個頁面內，客戶要求1.頁面載入速度要快，2頁面響應要快。3.這個頁面只能一屏，不能出現滾動條。因此這個頁面包含了大量的彈出層的操作。

由於這個頁面中，坑爹地包含了136張圖片，主要是很多LOGO類的小圖片。以前已經通過後臺對LOGO類圖片進行壓縮，使圖片尺寸有了一定地變小，但數量眾多，頁面還是很大。

由於不是每張圖片都是一定會看到的，需要使用者主動檢視才會看到圖片，因此，圖片決定採用延時載入。之前聽過LAZYLOAD，但是由於這個專案沒有滾動條，lazyload在這裡水土不服，於是便自己來寫一個專屬於自己的lazyload 實現思路是： 1.專案內的所有img，預設src都是一個1px*1px的grey.gif圖片，並將真實的圖片路徑存在data-original屬性中。 2.當img出現時，將src中的內容替換成data-original的內容。 下面是程式碼 HTML程式碼

<img src="/Public/images/grey.gif"  class="lazy"  data-original="/Public/attached/image/20160314/temp/20160314104045_80246jpg160x160.jpg"/>

<pre name="code" class="html" style="font-size:18px; line-height: 24px;"><img src="/Public/images/grey.gif"  class="lazy"  data-original="/Public/attached/image/20160314/temp/20160314104055_80244jpg160x160.jpg"/>
 

在圖片出現事件中，加上更換SRC的操作

var list=$("#"+id+" .lazy").each(function(){		
		$(this).attr("src",$(this).attr('data-original'));
	});

經過這樣處理，整個頁面的圖片基本是出現時才載入，首次載入節省了一半多的體積。
在實際工作中，高精尖的有難度技術不一定是好技術，能解決實際問題的技術，哪些再簡單，也是好技術。