js--判断资源是否存在

js--判断资源是否存在

• desc
• 实现原理
• code

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("图片不存在")
  }

来源：CSDN

作者：_冷月心

链接：https://blog.csdn.net/qq_42813491/article/details/103585051