利用CSS、JavaScript及Ajax實(shí)現(xiàn)圖片預(yù)加載的方法

更新時(shí)間：2016年11月29日 09:26:57 投稿：mrr

預(yù)加載圖片是提高用戶體驗(yàn)的一個(gè)很好方法，實(shí)現(xiàn)圖片預(yù)加載可以使用css、JavaScript、Ajax三種方法。下面逐一給大家介紹利用CSS、JavaScript及Ajax實(shí)現(xiàn)圖片預(yù)加載的方法，需要的朋友參考下吧

預(yù)加載圖片是提高用戶體驗(yàn)的一個(gè)很好方法。圖片預(yù)先加載到瀏覽器中，訪問者便可順利地在你的網(wǎng)站上沖浪，并享受到極快的加載速度。這對(duì)圖片畫廊及圖片占據(jù)很大比例的網(wǎng)站來(lái)說(shuō)十分有利，它保證了圖片快速、無(wú)縫地發(fā)布，也可幫助用戶在瀏覽你網(wǎng)站內(nèi)容時(shí)獲得更好的用戶體驗(yàn)。本文將分享三個(gè)不同的預(yù)加載技術(shù)，來(lái)增強(qiáng)網(wǎng)站的性能與可用性。

實(shí)現(xiàn)圖片預(yù)加載可以使用css、JavaScript、Ajax三種方法。下面分別介紹這些方法的實(shí)現(xiàn)。

使用CSS

單純的使用css可以將圖片加載到頁(yè)面元素的背景上，這種方法簡(jiǎn)單、高效：

#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; }

在其他地方調(diào)用時(shí)，只要路徑一致，瀏覽器就會(huì)在渲染過程中使用預(yù)加載（緩存）的圖片。簡(jiǎn)單、高效，不需要任何JavaScript。

弊端：使用這種方法，圖片會(huì)隨著頁(yè)面加載同時(shí)加載，延長(zhǎng)頁(yè)面加載的時(shí)間，使用JavaScript輔助完成會(huì)更高效。

使用CSS和JavaScript結(jié)合

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);

我們把圖片加載設(shè)置到頁(yè)面加載完成之后，所以不必?fù)?dān)心由于圖片和頁(yè)面同時(shí)加載而延長(zhǎng)訪問時(shí)間。

如果JavaScript運(yùn)行失敗也不必?fù)?dān)心，僅僅是圖片預(yù)加載失敗而已，當(dāng)調(diào)用圖片時(shí)也能正常顯示。

使用JavaScript實(shí)現(xiàn)

方法一

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"
)

方法二

這種方法其實(shí)和方法一是一樣的原理，只不過沒有放在數(shù)組中實(shí)現(xiàn)，而是分別去為 Image 對(duì)象的 src 負(fù)值。

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

假設(shè)上面的所有方法都不夠酷炫，那么，還有一種方法，就是使用Ajax來(lái)實(shí)現(xiàn)圖片的預(yù)加載。使用DOM來(lái)實(shí)現(xiàn)預(yù)加載，可以加載包括圖片，CSS，JavaScript的其他任何東西。相對(duì)于直接使用JavaScript，使用Ajax的好處就是CSS和JavaScript可以在他們的內(nèi)容不影響當(dāng)前頁(yè)面的情況下被預(yù)加載。對(duì)于圖片來(lái)說(shuō)這確實(shí)不是一個(gè)問題，盡管如此，這個(gè)方法依然很簡(jiǎn)潔高效：

window.onload =function(){
setTimeout(function(){
// XHR to request a JS and a CSS
varxhr =newXMLHttpRequest();
xhr.open('GET','http://domain.tld/preload.js');
xhr.send('');
xhr = newXMLHttpRequest();
xhr.open('GET','http://domain.tld/preload.css');
xhr.send('');
// preload image
newImage().src ="http://domain.tld/preload.png";
}, 1000);
};

就像這樣，這段代碼會(huì)預(yù)加載三個(gè)文件：preload.js，preload.css，preload.png。設(shè)置1秒的延時(shí)主要是防止加載JavaScript文件而導(dǎo)致正常頁(yè)面的功能性問題。

為了將其封裝起來(lái)，我們看看怎么使用原生JavaScript來(lái)寫這一段代碼：

window.onload =function(){
setTimeout(function(){
// reference to <head>
varhead =document.getElementsByTagName('head')[0];
// a new CSS
varcss =document.createElement('link');
css.type = 'text/css';
css.rel = 'stylesheet';
css.;
// a new JS
varjs =document.createElement('script');
js.type = 'text/javascript';
js.src = 'http://domain.tld/preload.js';
// preload JS and CSS
head.appendChild(css);
head.appendChild(js);
// preload image
newImage().src ='http://domain.tld/preload.png';
}, 1000);
};

在這里，我們通過DOM創(chuàng)建了三個(gè)元素來(lái)預(yù)加載了頁(yè)面上的三個(gè)文件。正如原文中所提到的，對(duì)于Ajax來(lái)說(shuō)，這個(gè)方法不是那么好。預(yù)加載的文件內(nèi)容不應(yīng)該添加到正在加載的頁(yè)面中。

以上所述是小編給大家介紹的利用CSS、JavaScript及Ajax實(shí)現(xiàn)圖片預(yù)加載的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: