jQuery檢測當一個圖像加載 - 沒有插件

Question

使用jQuery，有沒有辦法檢測何時加載完成一個特定的圖像？我見過這個插件：http://desandro.github.io/imagesloaded/但這應該是一個簡單的解決方案。我真的不想下載另一個插件。

用戶點擊此元素上：

<input type="file" /> 

jQuery函數圖像放到這個元素：

<img src="" /> 

我要確定當圖像加載完畢。這可以做到嗎？謝謝。

Answer 1

我做了一個jsfiddle，真的很粗糙工作示例.load（）工作here。

HTML

<figure class="button">button</figure> 
<div id="imgload"></div> 

CSS

figure { 
    width: 50px; 
    height: 20px; 
    line-height: 20px; 
    background: #ccc; 
    text-align: center; 
} 

#imgload {display:none;} 

jQuery的

$('.button').on('click', function(){ 
    $('#imgload').html('<img src="http://placekitten.com/700/400"/>'); 

    $('#imgload img').load(function(){ 
     $('#imgload').fadeIn(400); 
    }); 
}); 

點擊後，圖像被放置在div然後在加載完成後，div淡入。因此它成功檢測到圖像加載完成的時間。我已經使用過這種技術了一百次。

編輯：把它清理一下