如果你的网页 jQuery 使用 Google CDN 或者 Cloudflare 的 CDN,万一加载不到,依靠 jQuery 的 scripts 就无法运作了。所以 HTML5Boilerplate 或者其他达人,就写了一些 script 可以让加载不到 CDN 的 jQuery,从网站加载后备。
jQuery 后备
<!-- 加载Google CDN 的 jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- 测试是否能加载 CDN 的 jQuery,不过不能就写个 script 来加载服务器本身的 jQuery 文件 -->
<script>window.jQuery || document.write('<script src="http://DOMAIN.TLD/assets/js/jquery-1.9.1-min.js"><\/script>')</script>
在 WordPress 实现这个功能
添加下面的代码到主题的 functions.php 文件
function roots_scripts() {
if ( !is_admin() ) {
wp_deregister_script('jquery');
wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, null, false);
add_filter('script_loader_src', 'roots_jquery_local_fallback', 10, 2);
}
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'roots_scripts', 100);
// http://wordpress.stackexchange.com/a/12450
function roots_jquery_local_fallback($src, $handle = null) {
static $add_jquery_fallback = false;
if ($add_jquery_fallback) {
echo '<script>window.jQuery || document.write(\'<script src="' . get_template_directory_uri() . '/assets/js/vendor/jquery-1.10.2.min.js"><\/script>\')</script>' . "\n";
$add_jquery_fallback = false;
}
if ($handle === 'jquery') {
$add_jquery_fallback = true;
}
return $src;
}
add_action('wp_head', 'roots_jquery_local_fallback');
过程:
- 针对前端用户
- 注销 WordPress 的 jQuery
- 注册 CDN 版的 jQuery
- 加载 jQuery
- 在 jQuery 后面附加后备的 script
[ via ROOTS ]