博客原文：http://longtean.top/2017/10/15/%E5%9B%BE%E7%89%87%E9%A2%84%E5%8A%A0%E8%BD%BD/
在慕課上學(xué)習(xí)了圖片的預(yù)加載外傅，寫一篇博客總結(jié)一下好乐，方便以后復(fù)習(xí)，并與后面的懶加載作對比揣非。
什么是圖片預(yù)加載
預(yù)知用戶將發(fā)生的行為，提前加載用戶所需要的圖片持钉。換句話說盹靴，就是在網(wǎng)頁全部加載之前，提前加載圖片二驰。當(dāng)用戶需要查看時可直接從本地緩存中渲染扔罪，以提供給用戶更好的體驗(yàn)，減少等待的時間桶雀。否則矿酵，如果一個頁面的內(nèi)容過于龐大唬复，沒有使用預(yù)加載技術(shù)的頁面就會長時間的展現(xiàn)為一片空白∪梗可分為無序加載和有序加載
舉個栗子：
- 網(wǎng)站的loading頁
- 在顯示加載中的緩沖標(biāo)志時敞咧，正在瘋狂加載需要的圖片，而需要顯示圖片時辜腺，就不需要向服務(wù)器請求休建，直接從緩存中加載就可以了。
實(shí)現(xiàn)的方法
- 使用css的background屬性將圖片預(yù)加載到屏幕看不到的地方评疗，就像下面這樣测砂，只要圖片存儲的路徑不改變，在其他地方調(diào)用這些圖片是百匆，瀏覽器就會在渲染過程中使用預(yù)加載（緩存）的圖片邑彪，不需要使用css，但這種方法存在一些問題胧华，會增加頁面的整體加載時間,可以通過js來延遲加載預(yù)加載的圖片
preload-01 { background: url(-01.png) no-repeat -9999px -9999px; }
//也可以設(shè)置
{ width: 0; height: 0; display: none};
- 還可以通過js來實(shí)現(xiàn)預(yù)加載寄症，這里打個小廣告：這是一個預(yù)加載插件，有興趣的同學(xué)可以看看矩动。
- 這里再貼出網(wǎng)上的一些實(shí)現(xiàn)：
<div class="hidden">
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
";,
";,
";
)
//--><!]]>
</script>
</div>
- 還有就是通過ajax實(shí)現(xiàn)預(yù)加載有巧，不僅可以加載圖片，還可以預(yù)加載css悲没，js等篮迎。比直接使用js的好處在于加載js和css不會影響到當(dāng)前頁面。
window.onload = function() {
setTimeout(function() {
// XHR to request a JS and a CSS
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.js');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.css');
xhr.send('');
// preload image
new Image().src = "http://domain.tld/preload.png";
}, 1000);
};
上面代碼預(yù)加載了“preload.js”示姿、“preload.css”和“preload.png”甜橱。1000毫秒的延時是為了防止腳本掛起，而導(dǎo)致正常頁面出現(xiàn)功能問題栈戳。
