問題: 我有一組圖片,當用戶按下其中一個圖片時,圖片會成長到頁面中的一個區域。 圖片的交流是在js的幫助下完成的。 圖片重約0.5M,因此直到圖片顯示需要3秒。 我想在圖片不顯示的時候呈現一種動畫。 如何在js的幫助下做到這一點?如何在加載圖片(在網頁中)時向用戶顯示gif動畫?
6
A
回答
1
使用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");
});
});
+0
真棒,但不要認爲這需要jQuery – casraf 2010-03-01 23:59:56
2
總是有一個帶有「加載」消息的「標籤」標籤,只要您的圖像被插入,就會關閉。當然,即使是任何支持選框的人也會下臺。
1
插入預留位置元素,並附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();
});
相關問題
- 1. 如何在頁面加載時顯示ajax加載gif動畫?
- 2. 在jquery中顯示加載器/微調器時,GIF圖片不會動畫
- 3. 從網頁下載圖片,不向用戶顯示網頁?
- 4. 如何在Meteor 0.8中加載圖片時顯示加載動畫
- 5. 如何在iframe加載網站時顯示加載gif?
- 6. jQuery自動完成:如何顯示動畫GIF加載圖像
- 7. 在網頁加載時向用戶顯示一條消息
- 8. 動畫gif在IE的頁面加載時不動畫
- 9. 如何在頁面加載時異步加載圖像並在加載時顯示加載gif?
- 10. 如何在網站加載時顯示動畫GIF並在加載完成後消失?
- 11. 如何顯示動畫GIF?
- 12. 如何在Android應用程序中顯示動畫GIF圖像?
- 13. 如何使用.png圖片而不是.gif圖片在iphone中使用動畫顯示圖片?
- 14. 計時動畫gif顯示
- 15. 顯示頁面加載gif在javascript
- 16. 在X時間在C#中加載動畫GIF圖像
- 17. 在運行客戶端代碼時顯示加載gif圖像
- 18. 顯示正在加載頁面時加載動畫
- 19. 動畫圖標在網頁加載
- 20. 顯示正在加載CSS和JS文件時加載Bar或GIF動畫?
- 21. 如何用java中的httpClient下載動畫gif圖片
- 22. 顯示加載頁面加載GIF - iframe?
- 23. Qt - 如何在QGraphicsPixmapItem中顯示gif(動畫)圖像
- 24. KendoUI圖表 - 如何在加載數據時顯示動畫?
- 25. 如何在網頁加載時從右向左滾動圖像?
- 26. 顯示動畫GIF
- 27. 顯示gif動畫
- 28. 顯示gif動畫
- 29. 顯示gif動畫
- 30. 顯示動畫gif文件,直到asp頁面加載,而重定向?
請不要這樣做。你對你的用戶撒謊,暗示事情進展順利,實際上你對連接的狀態一無所知。 – 2010-03-01 23:47:42
我至少會在5秒後給加載圖片添加超時。然後顯示一個像紅色的X. – 2010-03-02 00:13:12