Ajax載入圖片

ajax|載入

在罈子裡看見一貼子<如何用javascript顯示位元據圖片>看了他們的回複，沒中要害，樓主的主要意思是後台入BinaryWrite()輸出一張圖片，Ajax接收時如何把它顯示出來．.回貼的五顏六色，眾說風雲..其實樓主的意思是要求圖片資料接收沒有完成以前保持"圖片載入中..."的效果給使用者，一旦資料完成接收則立即顯示．.

我們知道用資料庫儲存的二進位圖片資料都是先通過後台讀取資料，輸入到用戶端．在Asp.Net中我們用Response.BinaryWrite()產生圖片給瀏覽器，在用戶端直接<img src="xxx.aspx?id=xxxxxx>就OK了．如果是這樣，幹嘛要用Ajax啊，你說呢．.接直調用不就行了．我們也知道用Javascript載入二進位圖形資料很麻煩，而且絕不是好方法

下面是我實現的思路：
首先:後台輸入圖片是肯定的.我們要解決的是怎樣才能知道資料接收完成了呢？完成之後資料還是二進位的資料，我們怎樣才能輸出到瀏覽器呢？呵呵.其實很簡單利用Cache，同一個url請求會先調用Cache，接收xmlhttp對象返回就是接收完成了xhr.status=200，這個時候圖片已經被下載到緩衝中了直接<img src=url>圖片直接顯示出來了，因為相同URL所以瀏覽器直接調用Cache中的圖片資料，記住哦，這裡的URL要保持與xhr.open()裡的url一樣哦.下面給大家代碼參考

function LoadImage(ElementID,id)
{
//ElementID <img>的ID
//id 請求的圖片ID
 var url="getimage.aspx?ID="+id+"&stamptime="+new Date().getTime(); //這裡用new Date().getTime()可以使重新整理圖片
 var xhrObject = GetXhrObject();

 xhrObject.onreadystatechange=function event()
 {
  if(xhrObject.readystate==4)
  {
   if(xhrObject.status==200)
   {
    document.getElementById(ElementID).src=url;
   }
  }
 }
 xhrObject.open("get",url);
 xhrObject.send(null);
}