預加載圖片是提高用戶體驗的一個很好方法。圖片預先加載到瀏覽器中，訪問者便可順利地在你的網站上沖浪，并享受到極快的加載速度。這對圖片畫廊及圖片占據很大比例的網站來說十分有利，它保證了圖片快速、無縫地發布，也可幫助用戶在瀏覽你網站內容時獲得更好的用戶體驗。本文將分享三個不同的預加載技術，來增強網站的性能與可用性。
實現圖片預加載可以使用css、JavaScript、Ajax三種方法。下面分別介紹這些方法的實現。
使用CSS
單純的使用css可以將圖片加載到頁面元素的背景上，這種方法簡單、高效：
#div1{background:url(http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg) no-repeat -9999px-9999px; }#div2{background:url(http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg) no-repeat -9999px-9999px; }在其他地方調用時，只要路徑一致，瀏覽器就會在渲染過程中使用預加載（緩存）的圖片。簡單、高效，不需要任何JavaScript。
弊端：使用這種方法，圖片會隨著頁面加載同時加載，延長頁面加載的時間，使用JavaScript輔助完成會更高效。
使用CSS和JavaScript結合
functionpreload(){if(document.getElementById) {document.getElementById("div1").style.background ="url(http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg) no-repeat -9999px -9999px";document.getElementById("div2").style.background ="url(http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg) no-repeat -9999px -9999px";} }functionaddLoadEvent(func){varoldonload =window.onload;if(typeofwindow.onload !='function') {window.onload = func;} else{window.onload =function(){if(oldonload) {oldonload(); } func(); } } }addLoadEvent(preload);我們把圖片加載設置到頁面加載完成之后，所以不必擔心由于圖片和頁面同時加載而延長訪問時間。
如果JavaScript運行失敗也不必擔心，僅僅是圖片預加載失敗而已，當調用圖片時也能正常顯示。
使用JavaScript實現
方法一
varimages =newArray()functionpreload(){for(i =0; i < preload.arguments.length; i++) {images[i] = newImage()images[i].src = preload.arguments[i] } }preload( "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg","http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg")方法二
這種方法其實和方法一是一樣的原理 ，只不過沒有放在數組中實現，而是分別去為 Image 對象的 src 負值。
if(document.images) {img1 = newImage();img2 = newImage();img3 = newImage();img1.src = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg";img2.src = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg";}使用Ajax
假設上面的所有方法都不夠酷炫，那么，還有一種方法，就是使用Ajax來實現圖片的預加載。使用DOM來實現預加載，可以加載包括圖片，CSS，JavaScript的其他任何東西。相對于直接使用JavaScript，使用Ajax的好處就是CSS和JavaScript可以在他們的內容不影響當前頁面的情況下被預加載。對于圖片來說這確實不是一個問題，盡管如此，這個方法依然很簡潔高效：
window.onload =function(){setTimeout(function(){// XHR to request a JS and a CSSvarxhr =newXMLHttpRequest();xhr.open('GET','http://domain.tld/preload.js');xhr.send('');xhr = newXMLHttpRequest();xhr.open('GET','http://domain.tld/preload.css');xhr.send('');// preload imagenewImage().src ="http://domain.tld/preload.png";}, 1000);};就像這樣，這段代碼會預加載三個文件：preload.js，preload.css，preload.png。設置1秒的延時主要是防止加載JavaScript文件而導致正常頁面的功能性問題。
為了將其封裝起來，我們看看怎么使用原生JavaScript來寫這一段代碼：
window.onload =function(){setTimeout(function(){// reference to <head>varhead =document.getElementsByTagName('head')[0];// a new CSSvarcss =document.createElement('link');css.type = 'text/css';css.rel = 'stylesheet';css.;// a new JSvarjs =document.createElement('script');js.type = 'text/javascript';js.src = 'http://domain.tld/preload.js';// preload JS and CSShead.appendChild(css);head.appendChild(js);// preload imagenewImage().src ='http://domain.tld/preload.png';}, 1000);};在這里，我們通過DOM創建了三個元素來預加載了頁面上的三個文件。正如原文中所提到的，對于Ajax來說，這個方法不是那么好。預加載的文件內容不應該添加到正在加載的頁面中。
以上所述是小編給大家介紹的利用CSS、JavaScript及Ajax實現圖片預加載的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
