对静态资源加载失败的场景做降级处理
前言
通常会出现 图片、js、css、字体、CDN 加载失败这几种问题
图片加载失败
图片加载失败通常是 404 或 无权限（CDN存储并没有开白名单），处理方法大致有以下几种：
- 占位图，并且一定要设置 alt 属性
- 尝试重新加载
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>占位图</title>
</head><body><img src="img.jpg" alt="示例图片" onerror="onImgError(this)"><script>function onImgError(img) {console.log('图片加载失败了！');let retryCount = 0;const maxRetries = 5;const intervalTime = 1000;let intervalId;function retryLoadImage() {if (retryCount < maxRetries) {retryCount++;console.log(`正在尝试重新加载第 ${retryCount} 次...`);img.src = 'img.jpg';} else {console.log('重试次数达到最大，使用占位图');img.src = 'default.png'; // 设置占位图clearInterval(intervalId); // 停止定时器}}img.onerror = null;intervalId = setInterval(retryLoadImage, intervalTime);}</script>
</body></html>
css加载失败
- 使用备用样式文件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css</title>
</head><body><h1>动态加载 CSS 并处理失败</h1><script>function loadCSS(href, fallbackHref) {const link = document.createElement('link');link.rel = 'stylesheet';link.href = href;link.onload = function() {console.log('CSS 加载成功');};link.onerror = function() {console.log('CSS 加载失败，尝试加载备用样式');const fallbackLink = document.createElement('link');fallbackLink.rel = 'stylesheet';fallbackLink.href = fallbackHref;document.head.appendChild(fallbackLink);};document.head.appendChild(link);}// 尝试加载主样式，加载失败则加载备用样式loadCSS('style.css', 'fallback-style.css');</script>
</body></html>
js加载失败
处理方式同css文件加载失败，需要有备用文件
CDN加载失败
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CDN JS 加载失败处理</title>
</head>
<body><h1>如果 CDN 加载失败，将加载备用脚本。</h1><script src="https://cdn.example.com/script.js" onerror="onJsError()"></script><script>function onJsError() {console.log('CDN JS 加载失败，尝试加载备用脚本');const script = document.createElement('script');script.src = 'fallback-script.js'; // 替换为备用脚本路径document.body.appendChild(script);}</script>
</body>
</html>
字体加载失败
- font-family 设置多个字体
- 降级处理
@font-face {font-family: 'MyCustomFont';src: url('xxx/fonts/myfont.woff2') format('woff2');font-display: swap; /* 使用 swap 策略，加载失败时会显示回退字体 */
}
body {font-family: 'MyCustomFont', Arial, sans-serif;
}