js判断图片是否可从服务器正常取回

最新推荐文章于 2021-06-13 10:11:02 发布

pg_li

最新推荐文章于 2021-06-13 10:11:02 发布

阅读量256

点赞数

分类专栏： # js基础

本文链接：https://blog.csdn.net/ligaoming_123/article/details/93637864

版权

js基础专栏收录该内容

45 篇文章 1 订阅

订阅专栏

场景

做OEM定制化功能，在服务端只保存的当前图片的静态路径，但是当重新部署环境时，图片目录会被覆盖，此时基于产品健壮性考虑，在加载OEM定制logo等图片时，先做下判断，看定制数据能否正常取回。

通过new Image()创建后的onload函数必须等主进程走完后才会执行

解决方案

 /**
   * 验证图片后 进行热更新
   * @param {string} url  图片路径
   * @param {string} key
   * @param {boolean} img
   * @private
   */
 private __getImg(url?:string, key?: string, img = true) {
    if (img) {
      const imgObj = this.__isHasImg(url);
      if (imgObj) {
        const me = this;
        const ImgObj = new Image();
        ImgObj.onload = function() {
          if (ImgObj.width > 0 && ImgObj.height > 0) me.__updateByKey(key, url);
        };
        // 浏览器兼容性处理
        if (ImgObj.complete && ImgObj.width > 0 && ImgObj.height > 0) me.__updateByKey(key, url);
        ImgObj.src= url;
      }
    } else {
      this.__updateByKey(key, url);
    }
  }

// 关键代码
const ImgObj = new Image();
        ImgObj.onload = function() {
          if (ImgObj.width > 0 && ImgObj.height > 0) me.__updateByKey(key, url);
        };
        // 浏览器兼容性处理
        if (ImgObj.complete && ImgObj.width > 0 && ImgObj.height > 0) me.__updateByKey(key, url);
        ImgObj.src= url;