最近在后台整理博客,发现首页底部那几块图表(动态日历、分类雷达图、发布统计图)一直停在 Loading...,等半天都出不来。打开浏览器开发者工具一看,控制台飘了一排红色报错——jQuery 和 Bootstrap 都加载失败了,而且全都挂在 cdn.jsdelivr.net 上。
这个 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 换成国内的,能省不少心,页面打开也会更快更稳。



