Image():強制讓圖片緩存起來

時間 2019-11-08

標籤 image 強制圖片緩存起來简体版

原文原文鏈接

Image 對象

Image 對象表明嵌入的圖像。javascript

<img> 標籤每出現一次，一個 Image 對象就會被建立。
建立一個Image對象：var a=new Image(); 定義Image對象的src: a.src=」xxx.jpg」; 這樣作就至關於給瀏覽器緩存了一張圖片。

對於瀏覽器載入圖像來講，只有在對圖像發送一個 HTTP請求以後，它們纔會被瀏覽器載入，對圖像的 HTTP 請求要麼使用＜img＞標記，要麼經過方法調用實現。若是使用 JavaScript 腳原本處理在 mouseover 事件時交換圖像，或者在一段時間以後自動更改圖像，那麼在從服務器獲取圖像時可能要等上幾秒鐘到幾分鐘的時間。若是使用一個慢速的 Internet 鏈接，或者要獲取的圖像很是大，或者其它一些狀況，這種現象就特別明顯；這樣，延遲就形成你不能達到本身指望的效果。預載入是在須要圖像以前將其下載到緩存的一種方法。經過這一措施，當真正須要圖像時，它就能夠被當即從緩存中取出，從而可以當即顯示。html

示例：java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image</title>
    <script language = "JavaScript"> 
        function preloader() 
        { 
            var heavyImage = new Image(); 
            heavyImage.src = "3.jpg"; 
        } 
    </script> 
</head>
<body onLoad="javascript:preloader()"> 
    <a href="#" onMouseOver="javascript:document.img2.src='3.jpg'"> 
        <img name="img2" src="2.jpg">
    </a> 
</body> 
</html>

請注意，圖像標記自己不能處理 onMouseOver() 和 onMouseOut() 事件，這就是上例中<img> 標記被包含在一個<a> 標記之中的緣由，<a> 標記支持這兩個事件類型。瀏覽器

如圖，所需的圖片都已經加載。緩存

Image 對象的屬性服務器

屬性	描述
align	設置或返回與內聯內容的對齊方式。
alt	設置或返回沒法顯示圖像時的替代文本。
border	設置或返回圖像周圍的邊框。
complete	返回瀏覽器是否已完成對圖像的加載。
height	設置或返回圖像的高度。
hspace	設置或返回圖像左側和右側的空白。
id	設置或返回圖像的 id。
isMap	返回圖像是不是服務器端的圖像映射。
longDesc	設置或返回指向包含圖像描述的文檔的 URL。
lowsrc	設置或返回指向圖像的低分辨率版本的 URL。
name	設置或返回圖像的名稱。
src	設置或返回圖像的 URL。
useMap	設置或返回客戶端圖像映射的 usemap 屬性的值。
vspace	設置或返回圖像的頂部和底部的空白。
width	設置或返回圖像的寬度。

標準屬性spa

屬性	描述
className	設置或返回元素的 class 屬性。
title	設置或返回元素的 title。

Image 對象的事件句柄code

事件句柄	描述
onabort	當用戶放棄圖像的裝載時調用的事件句柄。
onerror	在裝載圖像的過程當中發生錯誤時調用的事件句柄。
onload	當圖像裝載完畢時調用的事件句柄。

function preloader() 
{ 
    var heavyImage = new Image(); 
    heavyImage.src = "3.jpg"; 
    heavyImage.onload=function(){alert(heavyImage.width)}; 
}

在實際應用中，咱們可能須要預載入多個圖像，而不止一個。htm

function preloader() 
{ 
    // counter 
    var i = 0; 
    // create object 
    var arr = new Array(4)
    // set image list 
    var images = new Array(); 
    images[0]="1.jpg" ;
    images[1]="2.jpg" ;
    images[2]="3.jpg" ;
    images[3]="4.jpg" ;
    // start preloading 
    for(i=0; i<=3; i++) { 
        arr[i] = new Image();
        arr[i].src = images[i];
    } 
}

1. cpu 緩存，讓程序快起來
2. Android圖片緩存（一）——universal-image-loader
3. Universal-Image-Loader（android圖片緩存）
4. 讓本身強大起來
5. 使用css讓圖片動起來
6. nginx強制緩存
7. 圖片緩存
8. 緩存圖片
9. 強制刷新圖標緩存
10. 協商緩存和強制緩存
更多相關文章...
• Markdown 圖片 - Markdown 教程
• Hibernate的二級緩存 - Hibernate教程
• 漫談MySQL的鎖機制
• 三篇文章瞭解 TiDB 技術內幕——說存儲

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。