[工具分享]好用的自訂AJAX Loading圖片

好用的自訂AJAX Loading圖片

原本AJAX Loading圖片只是讓網站使用者在使用的過程中得知網站還在讀取中或是處理事件中,其中一個原因是AJAX不會POSTBACK也不會轉頁,如果讀取時間較久,我們會誤以為網站沒有在動作,使用者會進而重新整理或離開網頁,所以需要圖片來提醒一下,但最近客戶連這個LOADING中的圖片也不放過了,一樣要美觀好看。

今天分享的這個網頁就是可以自訂一些好看順眼的Loading圖片,做好下載儲存,放到網頁中,就可以馬上用囉!

網址 : http://www.ajaxload.info/#preview

先選擇好樣式跟背景還有顏色 :

 

 

然後看到預覽中的結果,喜歡的話就抓下來吧~樣式很豐富喔!!

 

 

 

順便分享一下在ASP.NET中怎麼用吧,先用DIV切出想要放置的地方,用UpdatePanel包起來:

 

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline" UpdateMode="Conditional">
            <ContentTemplate>
         <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="500">
         <ProgressTemplate>
          <div id="DivLoading" align="center" style="padding:20px; width:200px; text-align:center; vertical-align:middle ;  position:absolute; z-index:10000; background-color:#F5F5F5; filter:alpha(opacity=100); border:Black 1px solid">
          <asp:Image ID="LoadingIcon" ImageUrl="圖片在這!!" ToolTip="indicator" runat="server" ImageAlign="Middle" /><

br>等一下喔~~ !  資料載入中!!!!
          </div>
         </ProgressTemplate>
         </asp:UpdateProgress>

 

 

 

結果 : 沒有放圖片版XD

 

等一下喔~~~ 資料載入中!!!!

 

 

 

 

 

分享結束囉,快快回去更新你網站的圖片吧!!!

分享


站作網站設計工作室 SiteMak Studio
Shinyo Ho 
Founder / Developer
email:shinyo.her@gmail.com|web:www.sitemak.com.tw