jQuery檢測何時加載一個圖像-無插件

Question

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

用戶單擊此元素：

<input type="file" />

jQuery函數將圖像放入以下元素：

<img src="" />

我想確定圖像何時完成加載。 能做到嗎？ 謝謝。

Answer 1

我做了一個用的jsfiddle的.load一個非常粗略的工作示例（）工作在這里 。

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淡入。因此，它可以成功檢測圖像何時完成加載。 我已經使用這種技術一百次了。

編輯：清理了一點