Ajax載入圖片

來源:互聯網
上載者:User
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);
}


 



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.