img的complete和onload

写在开头：当一个图片url被请求并加载之后（不一定得渲染出来），会放在缓存里，下次如果有一个相同的url被请求，会先在缓存里retrieve出该资源，实现节流。

complete:

 

综上，当出现以下几种状况，则complete=true

1.未设置src/ src=''/ 未设置srcset

2.src资源available,比如开篇里的，图片资源在缓存区

3.图片资源加载完毕了

4.图片加载失败

 

onload在图片加载完毕后调用，如在src加载资源后再绑定onload失效；或src未赋值，onload失效。

在一些场景下，如需对图片做统一处理，则应遵循如下流程：

  function fetchImg(){
    var img = new Image();
    img.src = url;
    if(img.complete){
      // handle logic here
    }

    img.onload = function(){
      // handle logic here
    }
  }

 

the end.