img的complete和onload

时间:2019-12-20 11:00:59   收藏:0   阅读:85

写在开头:当一个图片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.

原文:https://www.cnblogs.com/surfer/p/12071485.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!