jquery - jQuery：检查图像是否已完成加载

Question

可能重复：
检测图像何时加载的独立于浏览器的方法

如何检查客户端是否已完全下载图像，以便我可以以如下格式使用它：

<script type="text/javascript">
function doSomething(){
//doing something already
    if(image has finished loading) {
        alert("The image has been downloaded");
    }
    else {
        //do something else
    }
}
</script>

谢谢

Answer 1

您可以使用load：

$img.load(function() {
  // image is loaded
});

如果您有问题，请加载代码window.load而不是document.ready.

Answer 2

尝试这样的事情-：

<script type ="text/javascript">
    var imageLoaded = false;

    $(document).ready(function(){

        $("img").load(function(){
            imageLoaded = true;
        });
    });


    function doSomething(){
        //doing something already
        if(imageLoaded) {
           alert("The image has been downloaded");
        } 
        else {
           //do something else
        }
}

</script>

Answer 3

<span id="result"></span>
</p>

<script type="text/javascript">

    $('#image1')
    .load(function(){
        $('#result').text('Image is loaded!');  
    })
    .error(function(){
        $('#result').text('Image is not loaded!');
    });

</script>

Answer 4

所有这些仅使用加载函数回调的解决方案并不完全准确，因为有时不会为已缓存的图像或损坏的图像触发加载。有许多尝试尽可能简单地检测这种行为，我可以告诉你，最好的方法是使用 Desandro 加载的非常明亮的插件图像。

你可以在这里看到它： https ://github.com/desandro/imagesloaded/blob/master/jquery.imagesloaded.js