如何创建一个JavaScript回调来了解何时加载图像？

javascript callback image loading

2022-08-30 02:01:37

我想知道图像何时完成加载。有没有办法用回调来做到这一点？

如果没有，有没有办法做到这一点？

答案 1

.完成 + 回调

这是一种符合标准的方法，没有额外的依赖关系，并且等待的时间不超过必要的时间：

var img = document.querySelector('img')

function loaded() {
  alert('loaded')
}

if (img.complete) {
  loaded()
} else {
  img.addEventListener('load', loaded)
  img.addEventListener('error', function() {
      alert('error')
  })
}

资料来源：http://www.html5rocks.com/en/tutorials/es6/promises/

答案 2

Image.onload（） 通常可以正常工作。

若要使用它，需要确保在设置 src 属性之前绑定事件处理程序。

相关链接：

Mozilla on Image.onload（）

用法示例：

    window.onload = function () {

        var logo = document.getElementById('sologo');

        logo.onload = function () {
            alert ("The image has loaded!");		
        };

        setTimeout(function(){
            logo.src = 'https://edmullen.net/test/rc.jpg';         
        }, 5000);
    };

 <html>
    <head>
    <title>Image onload()</title>
    </head>
    <body>

    <img src="#" alt="This image is going to load" id="sologo"/>

    <script type="text/javascript">

    </script>
    </body>
    </html>