首頁 > php教程 > PHP开发 > 利用CSS、JavaScript及Ajax實作圖片預載的方法

利用CSS、JavaScript及Ajax實作圖片預載的方法

高洛峰
發布: 2016-12-03 15:45:01
原創
1468 人瀏覽過

預先載入圖片是提高使用者體驗的一個很好方法。圖片預先載入到瀏覽器中,訪客便可順利地在你的網站上衝浪,並享受到極快的載入速度。這對圖片圖庫及圖片佔據很大比例的網站來說十分有利,它保證了圖片快速、無縫地發布,也可幫助用戶在瀏覽你網站內容時獲得更好的用戶體驗。本文將分享三種不同的預先載入技術,來增強網站的效能與可用性。

實作圖片預先載入可以使用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"
)
登入後複製

   

方法二

這種方法其實和方法一是一樣的原理,只不過沒有放在數組中實現二

這種方法其實和方法一是一樣的原理,只不過沒有放在數組中實現,而是去為Ircmage負值。

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 CSS
varxhr =newXMLHttpRequest();
xhr.open(&#39;GET&#39;,&#39;http://domain.tld/preload.js&#39;);
xhr.send(&#39;&#39;);
xhr = newXMLHttpRequest();
xhr.open(&#39;GET&#39;,&#39;http://domain.tld/preload.css&#39;);
xhr.send(&#39;&#39;);
// preload image
newImage().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(&#39;head&#39;)[0];
// a new CSS
varcss =document.createElement(&#39;link&#39;);
css.type = &#39;text/css&#39;;
css.rel = &#39;stylesheet&#39;;
css.href = &#39;http://domain.tld/preload.css&#39;;
// a new JS
varjs =document.createElement(&#39;script&#39;);
js.type = &#39;text/javascript&#39;;
js.src = &#39;http://domain.tld/preload.js&#39;;
// preload JS and CSS
head.appendChild(css);
head.appendChild(js);
// preload image
newImage().src =&#39;http://domain.tld/preload.png&#39;;
}, 1000);
};
登入後複製

   

在這裡,我們透過DOM建立了三個元素來預先載入了頁面上的三個檔案。正如原文中所提到的,對於Ajax來說,這個方法不是那麼好。預先載入的文件內容不應該添加到正在載入的頁面中。

🎜🎜
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板