預載入
預載入：提前載入好資源，當需要時可以直接從本地快取中渲染，有助於提升網頁效能體驗。
實現方式：
1.CSS中的background屬性來實現
-------利用CSS的background屬性將圖片預載入到螢幕外的背景上。只要這些圖片的路徑保持不變，當它們在Web頁面的其他地方被呼叫時，瀏覽器就會在渲染過程中使用預載入（快取）的圖片。簡單、高效，不需要任何JavaScript。該方法雖然高效，但仍有改進餘地。使用該法載入的圖片會同頁面的其他內容一起載入，增加了頁面的整體載入時間

#preloadImg: after{
    content: "";
    background
 
: url(http://xxxx/xxx/img.png) no-repeat -9999px -9999px;
}

2使用JavaScript方式來實現
在JS中利用Image物件，為元素物件新增src屬性，將物件快取起來待後續使用。

<!--為img元素給一個空白圖片，並新增自定義屬性data-src，然後編寫JS給data-src賦值 -->
<img src='blank.png' data-src='img/testBlank.png' class='testBlankpng'>
<script>
    //單張圖片的預載入實現
    function
 
 preloadImg(url,callback) {
		var img = new Image();
		if(img.complete) { //Image物件屬性complete用於判斷圖片是否已經存在於瀏覽器快取裡，若是存在就直接呼叫回撥函式
		    callback.call(img);
		    return;  //圖片存在快取中時，直接呼叫完回撥函式就返回，不去執行onload事件
		}
		img.onload = function() {
		    img.onload = null;  //防止迴圈引用
 		    //當不存在快取中時，非同步呼叫onload事件裡的回撥函式
 

 		    callback.call(img);
		}
		img.src = url;
	}
	//preLoadImg('xxxx/xx.png', function() {});  //測試用
</script>

上述程式碼存在一定隱患，onload事件建立了一個匿名函式，形成了閉包，並且存在迴圈引用，所以會導致記憶體洩漏。（關於圖片的預載入,你所不知道的 http://www.cnblogs.com/rt0d/archive/2011/04/17/2018646.html
）所以建議先onload事件，再給img.src賦值

多張圖片的預載入js實現

var imgUrlArr = [
    'imgUrl1',
    'imgUrl2'
];

function preLoadImg(imgSrcUrls, callback) {
    //先對imgSrcUrls進行判斷，是否是陣列，若不是需要先將其轉化為陣列
    var imgSrcUrls = (imgSrcUrls instanceof Array)? imgSrcUrls: [imgSrcUrls];
    var imgArr = [];  //多個變數宣告建議這種寫法
        loadCount = 0;
        imgArrLength = imgSrcUrls.length;
	//	function getLoadCount() {}
        for(var i=0; i<imgArrLength;i++) {
			newImgUrls[i] = new Image();
			newImgUrls[i].src = newImgUrls[i];
			
			newImgUrls[i].onload =function() {
			    loadCount++;
			    if(loadCount===imgArrLength){   //此時圖片已經載入完成。可以處理回撥函式
			        callback();
			    }
			}
			newImgUrls[i].onerror = function() { 
				//處理無法載入成功時的處理，如用一張載入失敗的圖片代替顯示不了的圖片
				newImgUrls[i].src='../images/logoError.png';//注意圖片的路徑，使用小尺寸圖片
				newImgUrls[i].onerror = null;  //控制不要一直跳動
			}
        }
}

圖片載入失敗參考：web圖片載入 https://www.jianshu.com/p/2592cf9e5637
圖片斷網載入失敗 https://www.jianshu.com/p/f63425d224b7