前端面对资源加载失败的处理

一、图片资源加载失败

        可通过img标签的onrror事件对src重新赋值，采用默认图以及alt属性进行处理，或者进行重试操作。

<img src="001.png" alt="新闻封面" onerror={handleError(this)} />


function handleError(image){
       image.onerror = null; //防止死循环
       image.src = "default.png";
}

二、js资源、css资源加载失败

         可通过script/link标签的onerror事件动态加载备用样式或者进行重试操作，重要代码/样式采用内联或者嵌入方式。

<link href="./css/main.css" rel="stylesheet" onerror={handleError()} />


function handleError(){
        let link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = "./css/default/css";
        document.head.appendChild(link);
}

三、字体资源加载失败

       可采用font-display方式确认字体未加载时的操作，以及font-family采用多个字体进行备用。

@font-face {
    font-family: "CustomFont",
    src: url("customfont.woff2") format("woff2");
    font-display: "swap";
}

body {
    font-family: "CustomFont", "微软雅黑";
}

font-display 属性有以下几个可选值：

• auto：浏览器将使用其默认的字体显示策略。
• block：在字体加载期间，浏览器会隐藏文本，直到字体加载完成。如果字体加载失败，则会使用备用字体。
• swap：浏览器会立即使用备用字体显示文本，并在自定义字体加载完成后替换为自定义字体。如果自定义字体加载失败，则继续使用备用字体。
• fallback：浏览器会先尝试使用自定义字体。如果自定义字体在短暂的时间内（如100ms）没有加载完成，则会切换到备用字体。如果自定义字体在后续加载完成，浏览器也不会替换回自定义字体。
• optional：与 fallback 类似，但如果自定义字体在短暂时间内没有加载完成，浏览器会继续使用备用字体，并且即使自定义字体在后续加载完成，也不会进行替换。