js前端图片加载异常兜底方案


Posted in Javascript onJune 21, 2022

背景

网络环境总是多样且复杂的,一张图片可能会因为网路状况差而加载失败或加载超长时间,也可能因为权限不足或者资源不存在而加载失败,这些都会导致用户体验变差,所以我们需要一个图片加载异常的兜底方案。

<img>加载错误解决方案

内联事件

直接在img标签上使用内联事件处理图片加载失败的情况,但是这种方式代码侵入性太大,指不定就会有地方漏掉。

<img src='xxxxx' onerror="this.src = 'default.png'">

全局img添加事件

第一个方案侵入性太大,我们将入口收敛,为所有img标签统一添加error处理事件。

const imgs = document.getElementsByTagName('img')
Array.prototype.forEach.call(imgs, img =&gt; {
    img.addEventListener('error', e =&gt; {
        e.target.src = 'default.png'
    })
})

利用error事件捕获

为每个img添加事件处理函数的代价还是高了点,我们知道一般事件会经历三个阶段:

  • 捕获阶段
  • 处于目标阶段
  • 冒泡阶段

根据MDN文档中的描述:

When a resource (such as an <img> or <script>) fails to load, an error event using interface Event is fired at the element that initiated the load, and the onerror() handler on the element is invoked. These error events do not bubble up to window, but can be handled with a EventTarget.addEventListener configured with useCapture set to true.

我们可以知道img和srcipt标签的error并不会冒泡,但是会经历捕获阶段和处于目标阶段。前两个方案就是利用处于目标阶段触发事件函数,这一次我们在捕获阶段截获并触发函数,从而减少性能损耗。

document.addEventListener(
    'error',
    e => {
        let target = e.target
        const tagName = target.tagName || ''
        if (tagName.toLowerCase = 'img') {
            target.src = 'default.png'
        }
        target = null
    },
    true
)

替换src方式的最优解

上面的方案有两个缺点:

  • 如果是因为网络差导致加载失败,那么加载默认图片的时候也极大概率会失败,于是会陷入无限循环。
  • 如果是网络波动导致的加载失败,那么图片可能重试就会加载成功。

所以我们可以为每个img标签额外添加一个data-retry-times计数属性,当重试超过限制次数后就用base64图片作为默认兜底。

document.addEventListener(
    'error',
    e => {
        let target = e.target
        const tagName = target.tagName || ''
        const curTimes = Number(target.dataset.retryTimes) || 0
        if (tagName.toLowerCase() === 'img') {
            if (curTimes >= 3) {
                target.src = 'data:image/png;base64,xxxxxx'
            } else {
                target.dataset.retryTimes = curTimes + 1
                target.src = target.src
            }
        }
        target = null
    },
    true
)

CSS处理的最优解

上面方式是采用替换src的方式来展示兜底图,这种解决方式有一个缺陷:

  • 原图的资源链接无法从标签上获取(虽然可以通过加data-xxx属性的方式hack解决)。

所以还有一种更好的方式,就是利用CSS伪元素::before和::after覆盖原本元素,直接展示兜底base64图片。

CSS样式如下:

img.error {
  display: inline-block;
  transform: scale(1);
  content: '';
  color: transparent;
}
img.error::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: #f5f5f5 url(data:image/png;base64,xxxxxx) no-repeat center / 50% 50%;
}
img.error::after {
  content: attr(alt);
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  line-height: 2;
  background-color: rgba(0,0,0,.5);
  color: white;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

JS代码如下:

document.addEventListener(
    'error',
    e => {
        let target = e.target
        const tagName = target.tagName || ''
        const curTimes = Number(target.dataset.retryTimes) || 0
        if (tagName.toLowerCase() === 'img') {
            if (curTimes >= 3) {
                target.classList.remove('error')
                target.classList.add('error')
            } else {
                target.dataset.retryTimes = curTimes + 1
                target.src = target.src
            }
        }
        target = null
    },
    true
)

<img>加载超时解决方案

目前大多数应用都会接入CDN来加速资源请求,但是CDN存在节点覆盖不全的问题,导致DNS查询超时,此时如果切换Domain可能就会加载成功。

嗅探切换Domain(CNAME)

我们可以使用嗅探的方式,测试CDN提供的Domain是否能够正常访问,如果不行或者超时就及时切换成可访问Domain。 其中有几个注意点:

  • 为了防止嗅探图片缓存,需要添加时间戳保持新鲜度
  • Image图片加载没有超时机制,使用setTimeout模拟超时
// 防止嗅探图片存在缓存,添加时间戳保持新鲜度
export const imgUri = `/img/xxxxx?timestamp=${Date.now()}${Math.random()}`;

export const originDomain = 'https://sf6-xxxx.xxxx.com'

// 可采用配置下发的方式
export const cdnDomains = [
  'https://sf1-xxxx.xxxx.com',
  'https://sf3-xxxx.xxxx.com',
  'https://sf9-xxxx.xxxx.com',
];

export const validateImageUrl = (url: string) => {
  return new Promise<string>((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      resolve(url);
    };
    img.onerror = (e: string | Event) => {
      reject(e);
    };
    // promise的状态不可变性,使用setTimeout模拟超时
    const timer = setTimeout(() => {
      clearTimeout(timer);
      reject(new Error('Image Load Timeout'));
    }, 10000);
    img.src = url;
  });
};

export const setCDNDomain = () => {
  const cdnLoop = () => {
    return Promise.race(
      cdnDomains.map((domain: string) => validateImageUrl(domain + imgUri)),
    ).then(url => {
      window.shouldReplaceDomain = true;
      const urlHost = url.split('/')[2];
      window.replaceDomain = urlHost;
    });
  };

  return validateImageUrl(`${originDomain}${imgUri}`)
    .then(() => {
      window.shouldReplaceDomain = false;
      window.replaceDomain = '';
    })
    .catch(() => {
      return cdnLoop();
    });
};

// 替换URL
export const replaceImgDomain = (src: string) => {
  if (src && window.shouldReplaceDomain && window.replaceDomain) {
    return src.replace(originDomain.split('/')[2], window.replaceDomain);
  }
  return src;
};

服务端下发Domain(CNAME)

该方案需要后台同学配合,由后台判断当前当前可用Domain并返回。

getUsefulDomain()
    .then(e => {
        window.imgDomain = e.data.imgDomain || ''
    })

background-image加载异常解决方案

实际应用中背景图也会加载失败,通常这些元素没有error事件,所以也就无从捕获error事件了。此时就可以利用dispatchEvent,它同样拥有捕获阶段,MDN文档上是这么介绍的:

Dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().

js前端图片加载异常兜底方案

可以看到支持度也还是可以的,我们首先需要自定义一个事件并初始化这个事件,在背景图加载失败的时候触发这个自定义事件,最后在上层捕获这个事件并执行事件函数。

自定义事件

自定义事件有两种方式:

  • 使用createEvent() 和 initEvent(),但是根据MDN文档,initEvent方法已经从浏览器标准中移除,并不安全,但支持度很高。

js前端图片加载异常兜底方案

  • 使用new Event()的方式,但是支持率稍微差一点

js前端图片加载异常兜底方案

这里以第二种为例,根据MDN文档的用法创建一个自定义事件:

const event = new Event('bgImgError')

嗅探加载情况

使用前面定义的方法嗅探图片资源的情况。

validateImageUrl('xxx.png')
    .catch(e => {
        let ele = document.getElementById('bg-img')
        if (ele) {
            ele.dispatchEvent('bgImgError')
        }
        ele = null
    })

添加事件捕获

document.addEventListener(
    'bgImgError',
    e => {
        e.target.style.backgroundImage = "url(data:image/png;base64,xxxxxx)"
    },
    true
)

以上就是js前端图片加载异常兜底方案的详细内容,更多关于js前端图片加载异常方案的资料请关注三水点靠木其它相关文章!


Tags in this post...

Javascript 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
JS触摸与手势事件详解
May 09 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 #Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 #Javascript
JavaScript前端面试组合函数
Jun 21 #Javascript
Vue2项目中对百度地图的封装使用详解
JavaScript原型链中函数和对象的理解
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 #Javascript
5个实用的JavaScript新特性
Jun 16 #Javascript
You might like
重料打造自己的“宝马”---第三代
2021/03/02 无线电
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
python thread 并发且顺序运行示例
2009/04/09 Python
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
骨干教师培训制度
2014/01/13 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
团委竞选演讲稿
2014/04/24 职场文书
跳蚤市场口号
2014/06/13 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
三严三实心得体会范文
2014/10/13 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
python数据处理之Pandas类型转换
2022/04/28 Python
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android