js，css，font，png等静态资源如何当加载失败后使用备用地址

在 Web 开发中，为了确保 JavaScript、CSS、字体(fonts)、图片(png 等)等静态资源在主地址加载失败时能从备用地址下载，可以使用 JavaScript 的动态加载技术结合错误监听。这里有一个基本的实现思路：

对于 CSS 和 JavaScript 资源

可以使用动态创建 <link> 和 <script> 标签，并利用 onerror 事件监听加载失败，从而切换到备用地址。

示例代码：

对于 CSS：

function loadStyleSheetWithFallback(url, fallbackUrl) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = url;

    link.onerror = function() {
        console.log('Failed to load CSS from primary source, trying fallback.');
        link.href = fallbackUrl;
    };

    document.head.appendChild(link);
}

// 使用示例
loadStyleSheetWithFallback('/path/to/main.css', '/path/to/fallback.css');

对于 JavaScript：

function loadScriptWithFallback(url, fallbackUrl, callback) {
    var script = document.createElement('script');
    script.src = url;
    script.onload = callback;
    script.onerror = function() {
        console.log('Failed to load JS from primary source, trying fallback.');
        script.src = fallbackUrl;
        script.onload = callback; // 重新绑定加载成功回调
    };

    document.body.appendChild(script);
}

// 使用示例
loadScriptWithFallback('/path/to/main.js', '/path/to/fallback.js', function() {
    console.log('Script loaded successfully');
});

对于图片资源

图片可以通过 <img> 标签的 onerror 事件来监听加载失败，并更换 src 属性为备用地址。

<img src="/path/to/image.png" onerror="this.onerror=null; this.src='/path/to/fallback.png';">

或者使用 JavaScript 动态创建 <img> 标签：

function loadImageWithFallback(src, fallbackSrc) {
    var img = new Image();
    img.src = src;
    img.onerror = function() {
        console.log('Failed to load image, trying fallback.');
        img.onerror = null; // 防止无限循环
        img.src = fallbackSrc;
    };
    // 添加到DOM中
    document.getElementById('someContainer').appendChild(img);
}

// 使用示例
loadImageWithFallback('/path/to/image.png', '/path/to/fallback.png');

字体资源

字体资源的加载通常也是通过 CSS，因此可以采用类似 CSS 样式表的处理方式，或者通过监听 Web 字体加载失败的事件来实现，但这通常较为复杂，因为需要处理 @font-face规则和Font Loading API。

请注意，这些方法在实际应用中需要根据具体情况进行调整，比如确保在切换 URL 时不会引发循环加载错误等问题。此外，现代 Web 开发中，使用 Service Workers 和 Cache 策略也可以提高资源加载的可靠性和容错能力。

切换 URL 时不会引发循环加载错误等问题

对于资源加载失败并尝试从备用地址加载时，会引发循环加载错误等问题，即如果备用地址也加载失败，程序错误地反复尝试从主地址和备用地址加载资源，形成了一个无限循环。

为了避免一种情况，通常需要在代码中加入逻辑来确保：

限制重试次数：为资源加载设置最大尝试次数，超过这个次数后不再继续尝试，而是直接报告错误或使用默认资源。
明确标记加载状态：在尝试从备用地址加载资源时，如果再次失败，需要确保错误处理函数只被执行一次，可以通过设置标志位或者移除onerror事件监听器来实现。
确保清理和恢复：在切换src或href属性尝试备用地址前，清除之前的加载事件监听器，避免因之前的错误处理逻辑再次触发而陷入循环。

例如，通过 onerror 事件处理函数内部的逻辑来避免循环：

script.onerror = function() {
    console.log('Failed to load JS from primary source, trying fallback.');
    script.onerror = null; // 移除错误监听器，防止循环
    script.src = fallbackUrl;
    script.onload = callback; // 重新绑定加载成功回调
};

通过将onerror设置为null，我们确保了当从备用地址加载失败时，不会再次触发错误处理逻辑，从而防止了潜在的无限循环问题。