Question

使用jQuery，有没有办法检测一个特定图像何时加载？我见过这个插件：http://desandro.github.io/imagesloaded/但这应该是一个简单的解决方案。我真的不想下载另一个插件。

用户点击此元素：

<input type="file" />

jQuery函数将图像放入此元素：

<img src="" />

我想确定图像何时完成加载。可以这样做吗？感谢。

Answer 1

我用一个非常粗糙的.load（）工作here的工作示例制作了一个jsfiddle。

<强> 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会淡入。因此它成功检测到图像何时完成加载。我已经使用过这种技术一百次了。

编辑：清理一下

一个图像加载时jQuery检测 - 没有插件

1 个答案: