Question

可能重复：
Browser-independent way to detect when image has been loaded

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

<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

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

4 个答案: