圖片懶加載原理及實現
由於過多的圖片會嚴重影響網頁的加載速度，並且移動網絡下的流量消耗巨大，所以說延遲加載幾乎是標配了。
圖片懶加載的原理很簡單，就是我們先設置圖片的data-set屬性（當然也可以是其他任意的，只要不會發送http請求就行了，作用就是爲了存取值）值爲其圖片路徑，由於不是src，所以不會發送http請求。 然後我們計算出頁面scrollTop的高度和瀏覽器的高度之和， 如果圖片舉例頁面頂端的座標Y（相對於整個頁面，而不是瀏覽器窗口）小於前兩者之和，就說明圖片就要顯示出來了（合適的時機，當然也可以是其他情況），這時候我們再將 data-set 屬性替換爲 src 屬性即可。
實現懶加載思路
提前給所有的圖片設置寬和高來佔位，不設置圖片的src屬性，而是自定義一個data-src屬性來儲存圖片的路徑
判斷當前屏幕的位置（圖片的top值和屏幕底部的值），來進行是否顯示圖片，如果需要顯示的話，把data-src的值給src。
img srcset 屬性
img 元素的 srcset 屬性用於瀏覽器根據寬、高和像素密度來加載相應的圖片資源。
屬性格式：圖片地址 寬度描述w 像素密度描述x，多個資源之間用逗號分隔。例如：
<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />
上面的例子表示瀏覽器寬度達到 800px 則加載 middle.jpg ，達到 1400px 則加載 big.jpg。注意：像素密度描述只對固定寬度圖片有效。
img 元素的 size 屬性給瀏覽器提供一個預估的圖片顯示寬度。
屬性格式：媒體查詢 寬度描述（支持px），多條規則用逗號分隔。
<img src="images/gun.png"
srcset="images/bg_star.jpg 1200w, images/share.jpg 800w, images/gun.png 320w"
sizes="(max-width: 320px) 300w, 1200w"/>
上面的例子表示瀏覽器視口爲 320px 時圖片寬度爲 300px，其他情況爲 1200px。
css image-set()
css屬性image-set()支持根據用戶分辨率適配圖像。
body {
background-image: -webkit-image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
background-image: image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
}
上述代碼將會爲普通屏幕使用 pic-1.jpg，爲高分屏使用 pic-2.jpg，如果更高的分辨率則使用 pic-3.jpg，比如印刷。