顯示ajax加載程序圖像，直到加載實際圖像

因此，我有一個頁面，上面有小圖片縮略圖，頁面中間有一個大的區域用於放大照片。顯示ajax加載程序圖像，直到加載實際圖像

當用戶點擊縮略圖時，頁面中間會顯示一幅全尺寸的圖片。我只是改變了圖像的src屬性在這樣的中間以實現：

$('img#fullsize').attr('src', path); // path is built earlier in the jQuery code

的問題是，當全尺寸圖像太大它的作用是在中間的全尺寸圖像消失並沒有什麼直到新的全尺寸圖像開始加載（有時可能需要cca 5秒直到新圖像在高峯時間開始加載）。我想要的是顯示一個ajax加載器gif圖像，直到fullsize照片開始加載。我怎樣才能做到這一點？

謝謝。

來源

2010-01-03 Richard Knop

你有訪問這個應用程序的服務器嗎？或者圖像來自某個外部網站？ – 2010-01-03 21:25:38

我可以訪問服務器。 – 2010-01-03 21:43:36

不知道jQuery，但<img>有一個onload事件。你可以做的是

設置所顯示的圖像的src到加載微調GIF，然後
負載的實際圖像到一個隱藏img，
一旦onload事件觸發交換了src各地：

代碼：

<!-- preload spinner gif: --> 
<img src="loading_spinner.gif" style="display:none" /> 

<!-- img placeholders: --> 
<img src="" id="fullsize" /> 
<img src="" id="hidden_img" style="display:none" /> 

<a href="javascript:loadFullSize()">Click here to load image</a> 

<!-- load image: --> 
<script> 
    function loadFullSize() { 
    function get (id) {return document.getElementsById(id)} 

    var visible = get('fullsize'); 
    visible.src = 'loading_spinner.gif'; 

    var hidden = get('hidden_img); 
    hidden.src = path; 

    hidden.onload = function(){ 
     visible.src = path; 
    } 
    } 
</script>

如果你擔心這個問題，你可以預先加載spinner gif。

來源

2010-01-03 21:30:05 slebetman

是的，但是當圖像加載完成時觸發該事件。但是我試圖擺脫用戶點擊縮略圖和新圖像星星顯示在頁面之間（需要幾秒鐘直到它開始出現）之間的停頓。 – 2010-01-03 22:08:13

這正是你想要的不是嗎？您的問題解釋爲：檢測圖像何時裝載完成，以便同時顯示微調器。 – slebetman 2010-01-03 23:47:40

沒有實際的代碼只是一個簡短的想法：怎麼樣爲您的圖像定義一個CSS背景？除了透明圖像之外應該工作（你將不得不在後面刪除這些背景） - 但實際上：我還沒有嘗試過。

來源

2010-01-03 21:20:36

加載圖像可能會非常棘手。一個合理的跨瀏覽器的方法來檢查，如果圖像被加載是檢查完整PARAM天然圖像對象上和寬度大於0

像這樣應該工作：

var img = $('img#fullsize').attr('src', path)[0]; 

window.setTimeout(function() { 
    if (img.complete && img.width) { 
     console.log('loaded!'); 
    } 
    window.setTimeout(arguments.callee, 1); 
}, 1);

來源

2010-01-03 22:25:45 David

無需使用setTimeout進行輪詢。有一個DOM標準，可以收聽圖像的corss-bowser onload事件。 – slebetman 2010-01-03 23:48:40

的onload在圖像實際加載到Firefox之前發生的火災......

編輯：如何尷尬，讓它工作使用onload和「適當」的JavaScript。 D'哦！

來源

2010-02-28 14:44:46

顯示ajax加載程序圖像，直到加載實際圖像

回答

相關問題