js--判断资源是否存在

• 学习资源推荐

---

• 微信扫码关注公众号 ：前端前端大前端，追求更精致的阅读体验 ，一起来学习啊
• 关注后发送关键资料,免费获取一整套前端系统学习资料和老男孩python系列课程
  

---

desc

在实际业务开发中，我们常会遇到条件渲染的问题，比如图片。当目标图片存在，则显示目标图片，不存在则显示默认的占位图片。如果在服务端(比如nodejs)很好实现，fs模块的existsSync方法就可以解决，但是前端，需要手动写一些逻辑判断

实现原理

在html标签中，具有src属性的标签在给其赋值时，会立刻发起一次异步请求，而且支持跨域。比如script标签，img标签,前者是jsonp的关键，后者是图片懒加载的关键。对img标签而言，例用src设置后的异步请求和onload,onerror可以检测资源是否存在。

code

checkImgExist接收三个参数，目标路径，成功回调和失败回调。onload，onerror 请求都是异步操作，必须通过回调函数处理其他逻辑

function checkImgExist(src, successCallback, errorCallback) {

    var img = new Image()
    img.src = src
    img.onload = function () {
        successCallback(src);
    }
    img.onerror = function () {
        errorCallback(defaultImg);
    }

}

  function successCallback(src) {
    console.log("图片存在")      
}

 function errorCallback() {
      console.log("图片不存在")
  }