如果圖像尚未完全加載，最好的方式來插入加載器圖標？

給出的HTML結構：如果圖像尚未完全加載，最好的方式來插入加載器圖標？

<div class="image-container"> 
    <img id="firstslide" src="img/verybig.jpg"> 
</div>

我不知道是否有一個容易和簡單的方法來檢查

如果currenly加載圖像並插入到DIV加載圖標和
已完成加載並顯示滿載圖片

有沒有提示？

來源

2012-04-16 Jurudocs

你有透明圖像的工作？你知道你的圖片大小是多少？一種方法是給每個'img'標籤一個背景圖片。 – 2012-04-16 19:59:34

@BrianGlaz謝謝你的提問！我有非常大的圖像...就像2 MB ...我討厭它，當這個圖像我慢慢地建立起來...相反，我喜歡有一個小圖標，只要圖像正在加載... – Jurudocs 2012-04-16 20:05:09

的jsfiddle：http://jsfiddle.net/FjfvZ/60/

如果你正在使用jQuery：

<div id="loading">Loading</div> 
<img id="image" src="image.png" style="display:none"/> 

<script> 
    $('#image').load(function() 
    { 
     $('#loading').hide(); 
     $(this).show(); 
    }); 
</script>

來源

2012-04-16 20:02:47

- ..謝謝！ – Jurudocs 2012-04-16 20:16:46

我嘗試爲此創建一個小提琴...所以每個人都可以按照 – Jurudocs 2012-04-16 20:19:52

的任何幫助嗎？ http://jsfiddle.net/FjfvZ/ – Jurudocs 2012-04-16 20:48:09

我用圖片預加載插件：

http://www.farinspace.com/jquery-image-preload-plugin/

這會給你控制做任何你想做的事情。

來源

2012-04-16 19:59:03

您可以使用一個小的加載圖像作爲背景圖像，一旦加載後它將被實際圖像覆蓋。

這是jsFiddle example。

來源

2012-04-16 19:59:46 j08691

謝謝很多！但我的情況下，HTML圖像已經在dom中。我可以隱藏它，然後再次顯示它...但是我需要的是事件或者是在圖像加載過程中發生的事情...... – Jurudocs 2012-04-16 20:16:03

這提供了一個簡單不適用很好的解決方案：

http://www.appelsiini.net/projects/lazyload

來源

2012-04-16 20:00:21 undefined

我會從CSS做，如設置加載動畫圖像作爲選擇圖像的背景：

CSS：

img.loader { 
    background: url(loader.gif) 50% 50% no-repeat; 
}

HTML：

<div class="image-container"> 
    <img id="firstslide" class="loader" style="width: 100px; height: 100px;" src="img/verybig.jpg" alt=""/> 
</div>

來源

2012-04-16 20:01:05

只是好奇：除了'50％50％'''不會'中心'也工作？我覺得'50％50％'會將左邊界和上邊界放置在中心，而不是圖像的中心到中心...... – VictorKilo 2012-04-16 20:02:52

這是一樣的。我使用'50％50％'，這對我來說更具可讀性。 – 2012-04-16 20:04:54

不，這是相同的：http://www.w3.org/TR/CSS21/colors.html#propdef-background-position – 2012-04-16 20:05:21

如果圖像尚未完全加載，最好的方式來插入加載器圖標？

回答

相關問題