緩慢加載圖像，顯示臨時圖像的最佳方式？也許JQuery？

我正在使用Google Charts在我的應用程序中顯示圖表數據。有時Google會很慢，圖表需要一段時間才能加載。這種情況似乎是一個足夠普遍的模式 - 所以我想知道什麼是一種很好的方法來顯示臨時圖像，而圖像是從谷歌提供的。我有權訪問jQuery，並看到了一些「預加載」插件。這是我需要的嗎？緩慢加載圖像，顯示臨時圖像的最佳方式？也許JQuery？

這個場景/模式的正確名詞叫做「圖像預加載」嗎？

我很想聽聽人們用來解決這種情況。

感謝

來源

2009-12-28 rsturim

歡迎的StackOverflow！偉大的第一個問題 – Sampson 2009-12-28 17:36:12

曾經有過'img'屬性'lowsrc'，它沒有代碼或插件。不幸的是，它在現代瀏覽器中不受支持。 – recursive 2009-12-28 17:38:47

偉大的第二個問題！ ;） – 2009-12-28 17:54:26

在圖像加載過程中，您可以看到在http://ajaxload.info/找到的那些精美裝載gif中的一個。加載圖像後，您將隱藏加載gif並顯示圖像本身。

查看http://jqueryfordesigners.com/image-loading/的教程。

來源

2009-12-28 17:39:06 Flatlin3

預加載圖像設置通常是當你下載圖像在被請求他們的預期，但用戶實際發出請求之前看到他們。我相信目前的想法通常會增加開銷，除非您的用戶中有很大一部分用戶可以看到圖像。

來源

2009-12-28 17:37:50

圖像有一個onload事件，一旦圖像加載完成就會觸發。

你可以聽這個事件，直到它觸發顯示另一個圖像。

<script> 
function showImage() { 
    $("#blah").show(); 
    $("#temp").hide(); 
} 
</script> 

<img id="temp" src="temp_image.png" /> 
<img id="blah" src="blah.png" onload="showImage();" style="display:none;"/>

來源

2009-12-28 17:40:16

謝謝。這很好。 – user1261774 2015-04-01 00:17:52

不，你不想預加載（這個假設是在指定的圖像加載時拖延頁面加載）。你只需要顯示一個加載圖形。

$(.loading).css({ 
    'background-image':'myLoading.gif', 
    'background-repeat: 'no-repeat', 
    height: 25, 
    width: 25 
}).load(function(){ 
    $(this.css({ 
    'background-image': null, 
    height: 'auto', 
    width: 'auto' 
    }); 
});

或者其他類似的效果......音符高度和寬度應該是loaing圖像的大小...除非你知道您選擇拉低圖像的大小。

來源

2009-12-28 17:44:43 prodigitalson

預載不是要走的路。如果您的圖像在您的應用程序中直接可見，您的瀏覽器將盡可能快地加載它，並且無法使用Javascript更快地加載它。

你可以做的是加載速度較慢。

你似乎認爲圖像加載速度很慢，因爲你希望它是立竿見影的。很難做到快速。

也許你可以嘗試另一種方式。設計您的應用程序，以便在用戶與某些內容交互（單擊按鈕，鏈接等）時顯示圖表，然後在用戶請求時加載圖表。

我看到2個優點，主要針對低帶寬用戶（移動用戶？）：

用戶不會通過其漫長的加載過程中受到干擾
- 你知道像頁面佈局改變，而圖像加載
的初始帶寬你的應用程序的使用率會更低，這會使它看起來更加敏感
- 初始加載的圖片越少，瀏覽器準備的速度就會越快

思想無恥地從AppleInsider移動版本

來源

2009-12-28 17:58:01

直觀溶液負載（非常）大圖像被盜。例如：

縮略圖是100×75，大的圖像加載大小960x720，
的onClick縮略圖 - 我們開始load('/images/audi_big.jpg')大圖像，
之後替換oryginal圖像$("#big_image img").attr({src: '/images/audi_120px.jpg'});，我們有縮略圖寬度= 「960」。
在具有信息LOADING {CSS}z-index: 1是添加可選層，
如果大的圖像加載做到這一點：$("#big_image img").attr({src: '/images/audi_big.jpg'});

來源

2010-01-24 00:43:14 bizauto

緩慢加載圖像，顯示臨時圖像的最佳方式？也許JQuery？

回答

相關問題