网络环境总是多样且复杂的,一张图片可能会因为网路状况差而加载失败或加载超长时间,也可能因为权限不足或者资源不存在而加载失败,这些都会导致用户体验变差,所以我们需要一个图片加载异常的兜底方案。
直接在img标签上使用内联事件处理图片加载失败的情况,但是这种方式代码侵入性太大,指不定就会有地方漏掉。
<img src='xxxxx' onerror="this.src = 'default.png'">
第一个方案侵入性太大,我们将入口收敛,为所有img标签统一添加error处理事件。
const imgs = document.getElementsByTagName('img') Array.prototype.forEach.call(imgs, img => { img.addEventListener('error', e => { e.target.src = 'default.png' }) })
为每个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 )
上面的方案有两个缺点:
所以我们可以为每个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 )
上面方式是采用替换src的方式来展示兜底图,这种解决方式有一个缺陷:
所以还有一种更好的方式,就是利用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 )
目前大多数应用都会接入CDN来加速资源请求,但是CDN存在节点覆盖不全的问题,导致DNS查询超时,此时如果切换Domain可能就会加载成功。
我们可以使用嗅探的方式,测试CDN提供的Domain是否能够正常访问,如果不行或者超时就及时切换成可访问Domain。 其中有几个注意点:
// 防止嗅探图片存在缓存,添加时间戳保持新鲜度 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并返回。
getUsefulDomain() .then(e => { window.imgDomain = e.data.imgDomain || '' })
实际应用中背景图也会加载失败,通常这些元素没有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().
可以看到支持度也还是可以的,我们首先需要自定义一个事件并初始化这个事件,在背景图加载失败的时候触发这个自定义事件,最后在上层捕获这个事件并执行事件函数。
自定义事件有两种方式:
这里以第二种为例,根据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 )