[前端] 判断图片是否加载完成

图片会被浏览器缓存，单纯用 onload 事件监听器会监听到已经被缓存的图片的加载事件，这可能并不是我们需要的。解决方法：使用 complete + onload

<div id="container">
     <img src="..." />
     <img src="..." />
     <img src="..." />
     <img src="..." />
</div>

<script>
$("#container img").each(function() {
    if (this.complete) {
        // this image already loaded
        // do whatever you would do when it was loaded
    } else {
        $(this).on('load', function() {
            // image now loaded
        });
    }
}); 

需要注意上面这种遍历的写法和直接在 IMG DOM 的 onload 事件上加回调是不同的。

<div id="container">
     <img onload="imageLoad()" src="..." />
     <img onload="imageLoad()" src="..." />
     <img onload="imageLoad()" src="..." />
     <img onload="imageLoad()" src="..." />
</div>

直接赋值 onload 回调可以避免图片未加载完导致的 DOM 不存在问题。

参考：https://stackoverflow.com/questions/8570018/jquery-how-to-listen-to-the-image-loaded-event-of-one-container-div