你有任何使用jQuery的Ajax加載圖片想法嗎？

Question

我有一個頁面正在加載jQuery。初始加載包括100條記錄，每條記錄有6個圖標。不用說，加載需要幾秒鐘，我想給用戶一個「加載」提示/動畫。

任何想法？

Answer 1

http://www.ajaxload.info/是用於生成GIF動畫爲這樣的事情一個很好的資源。

一旦你得到了你的動畫，呈現爲頁面的一部分;在動畫的onload（）事件上觸發jQuery加載機制（因此您可以確定動畫已先加載），並在加載序列結束時使用回調來禁用/隱藏動畫GIF。

Answer 2

您可以將帶有動畫GIF圖像的div顯示爲加載提示。這就是我過去的做法。

Answer 3

我需要的東西，這樣我更換，將加載一個簡單的，居中的動畫某種GIF，上面寫着「加載中，請等待」或類似的消息元素的任何時間。如果僅僅是幾秒鐘，進度指標可能是過度的，但是一個簡單的動畫可以讓大多數人確信，是的，你的網站還在工作。

Answer 4

馬特Berseth有a nice jQuery-based way of doing this。

Answer 5

您可能需要建立一個全球性的AJAX事件來顯示/隱藏加載圖標。看一看：http://docs.jquery.com/Ajax_Events

Answer 6

另一個的ressource加載圖片：http://www.loadinfo.net/

Answer 7

你可以做CCS3一個動畫，例如，如果你想有一個脈衝：

的HTML標記：

<div class="pulse"></div> 

的CSS：

.pulse { 
    width: 32px; 
    height: 32px; 
    margin: 25% auto; 
    background-color: #303030; 
    -webkit-border-radius: 16px; 
    -moz-border-radius: 16px; 
    -ms-border-radius: 16px; 
    -o-border-radius: 16px; 
    border-radius: 16px; 
    -webkit-animation: scaleout 1.0s infinite ease-in-out; 
    animation: scaleout 1.0s infinite ease-in-out; 
} 
@-webkit-keyframes scaleout{ 
    0%{ 
     -webkit-transform:scale(0) 
    } 
    100%{ 
     -webkit-transform:scale(1); 
     opacity:0 
    } 
} 
@-moz-keyframes scaleout{ 
    0%{ 
     -moz-transform:scale(0) 
    } 
    100%{ 
     -moz-transform:scale(1); 
     opacity:0 
    } 
} 
@-ms-keyframes scaleout{ 
    0%{ 
     -ms-transform:scale(0) 
    } 
    100%{ 
     -ms-transform:scale(1); 
     opacity:0 
    } 
} 
@-o-keyframes scaleout{ 
    0%{ 
     -o-transform:scale(0) 
    } 
    100%{ 
     -o-transform:scale(1); 
     opacity:0 
    } 
} 
@keyframes scaleout{ 
    0%{ 
     transform:scale(0); 
     -webkit-transform:scale(0) 
    } 
    100%{ 
     transform:scale(1); 
     -webkit-transform:scale(1); 
     opacity:0 
    } 
} 

或者你可以創建一個與內部圖像或背景圖像的div，你有動畫的幾個想法，它有一個可下載的集免費，享受。