为CDN链接加载添加超时:在Head标签中实施超时机制
P粉709307865
P粉709307865 2023-09-11 17:44:04
0
1
524

我正在使用CDN加载一些样式。对于没有配置代理的机器,它可以正常工作。但有时候人们可能使用代理连接到网页,CDN无法解析,从而导致页面加载时间很长或者根本无法加载,除非用户强制刷新。

有没有办法在HTML上指定一个属性或其他东西,以避免在无法解析资源时尝试加载它们?

P粉709307865
P粉709307865

全部回复(1)
P粉270891688

据我所知,没有原生的方法可以停止加载资源。实际上,如果在正常情况下无法获取资源,请求应该自动超时。

这种方法有点繁琐,可能有更好的解决方案适用于你的特定问题。

但是你可以尝试从头部删除链接标签,然后插入一个脚本来获取cdn的内容,然后动态地将包含内容的样式标签附加到头部。类似于这样:

(function() {
  <script>
    const controller = new AbortController();
    const HOW_LONG_TO_WAIT_IN_MS = 5000;
    let loaded = false;

    fetch(URL_FOR_CDN, { signal: controller.signal })
      .then(response => response.text())
      .then(text => {
        document.head.append(`<style>${text}</style>`);
        loaded = true;
      });

      setTimeout(() => {
        if (!loaded) controller.abort();
      }, HOW_LONG_TO_WAIT_IN_MS);
})()
</script>

你需要将这个脚本放在头部的早些位置,这肯定会稍微减慢页面加载速度。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板