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.

路漫漫其修远兮,吾将上下而求索。 May stars guide your way⭐⭐⭐
原文地址:https://www.cnblogs.com/surfer/p/12071485.html