如何在加載圖片（在網頁中）時向用戶顯示gif動畫？

問題：我有一組圖片，當用戶按下其中一個圖片時，圖片會成長到頁面中的一個區域。圖片的交流是在js的幫助下完成的。圖片重約0.5M，因此直到圖片顯示需要3秒。我想在圖片不顯示的時候呈現一種動畫。如何在js的幫助下做到這一點？如何在加載圖片（在網頁中）時向用戶顯示gif動畫？

來源

2010-03-01 Alon Ashkenazi

請不要這樣做。你對你的用戶撒謊，暗示事情進展順利，實際上你對連接的狀態一無所知。 – 2010-03-01 23:47:42

我至少會在5秒後給加載圖片添加超時。然後顯示一個像紅色的X. – 2010-03-02 00:13:12

使用load事件，像：

$("img.something").click(function() { 
    $(".someDiv").html('<img src="loading.gif"/>'); 
    var $img = $('<img src="bigImage.jpeg" style="display:none"/>'); 
    $img.load(function() { 
     // once the loading has completed 
     $(".someDiv").html($(this)); 
     $(this).fadeIn("slow"); 
    }); 
});

來源

2010-03-01 23:37:23 karim79

真棒，但不要認爲這需要jQuery – casraf 2010-03-01 23:59:56

總是有一個帶有「加載」消息的「標籤」標籤，只要您的圖像被插入，就會關閉。當然，即使是任何支持選框的人也會下臺。

來源

2010-03-01 23:36:29

插入預留位置元素，並附onload事件回調到<img>元素。使用jQuery，

var imageElem = $('<img />'), 
    placeholder = $('<div class="loading">Loading...</div>'); 

imageElem.attr('src', 'http://example.com/big_image.jpg'); 

$('#images').append(placeholder).append(imageElem); 
imageElem.hide().load(function() { 
    placeholder.remove(); 
    imageElem.fadeIn(); 
});

來源

2010-03-01 23:47:22 nanotech

如何在加載圖片（在網頁中）時向用戶顯示gif動畫？

回答

相關問題