最近在后台整理博客,发现首页底部那几块图表(动态日历、分类雷达图、发布统计图)一直停在 Loading...,等半天都出不来。打开浏览器开发者工具一看,控制台飘了一排红色报错——jQuery 和 Bootstrap 都加载失败了,而且全都挂在 cdn.jsdelivr.net 上。

修复前:底部图表一直 Loading

这个 cdn.jsdelivr.net 是境外的 CDN,在国内访问经常超时、连不上。jQuery 一加载失败,依赖它的图表脚本就全部罢工,所以那一整块区域就永远停在转圈状态。

排查过程

打开 F12 的 Network 面板,问题一眼就看到了:

  • cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js → 隧道连接失败
  • cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css → 隧道连接失败

根因找到了:我的博客主题(Handsome)默认把 jQuery、Bootstrap 这些外部库挂在了境外 CDN(jsDelivr)上。

修复方法

其实完全不用改代码。Handsome 主题后台自带一个"公共CDN库"的设置项:

后台 → 设置外观 → 速度优化 → 选择公共CDN库

把 jsDelivr 改成 BootCDN(国内 CDN),点保存,就完成了。

修复后:首页顶部一切正常

保存后刷新页面,jQuery 和 Bootstrap 都从 cdn.bootcss.com 正常加载了,首页底部也不再转圈,正常渲染出内容。

修复后:首页底部正常显示

小结

  • 症状:jQuery / Bootstrap 加载失败,统计图表一直 Loading
  • 根因:主题默认公共 CDN 用了境外 jsDelivr,国内访问不稳定
  • 解决:后台把"公共CDN库"改成国内源(BootCDN / 百度 / 七牛 / catCDN / 本地)
  • 验证:CDN 切换后 jQuery、Bootstrap 均正常加载,页面恢复渲染

如果是用 Handsome 主题的朋友,也可以去 后台 → 设置外观 → 速度优化 里把这个 CDN 换成国内的,能省不少心,页面打开也会更快更稳。

最后修改:2026 年 10 月 13 日
如果觉得我的文章对你有用,请随意赞赏