解决WP Rocket延迟加载JS导致页面错乱的问题：特定URL排除JS脚本-js教程-PHP中文网

解决WP Rocket延迟加载JS导致页面错乱的问题：特定URL排除JS脚本

霞舞

发布： 2025-07-11 18:10:01

原创

803人浏览过

解决wp rocket延迟加载js导致页面错乱的问题：特定url排除js脚本

本文将指导你如何在使用WP Rocket的“延迟JavaScript执行”功能时，针对特定页面排除某些JS脚本，以避免页面错乱。这通常发生在某些JS脚本必须立即加载才能保证页面正常渲染的情况下，例如轮播图或依赖特定JS库的功能。我们将以修改WP Rocket提供的helper插件为例，详细讲解如何配置，并提供一些排查问题的思路。

修改Helper插件以排除特定URL的JS脚本延迟加载

WP Rocket提供了一个名为“WP Rocket | Exclude JS scripts from Delay JS only at some URLs”的helper插件，允许用户在特定URL下排除指定的JS脚本。然而，有时按照插件说明配置后，仍然无法生效。以下是详细的配置步骤和可能的解决方案：

理解插件原理：

该插件通过rocket_delay_js_exclusions过滤器，修改WP Rocket的JS延迟加载排除列表。它首先判断当前页面是否在指定的URL列表中，如果是，则将指定的JS脚本添加到排除列表中，使其不被延迟加载。
配置wp-rocket-exclude-delay-js-per-url.php文件：

打开wp-rocket-exclude-delay-js-per-url.php文件，找到以下代码段：
```
$excluded_slugs = array(
    'tablets',
    //'another-slug',
    //'another-one',
);
```
登录后复制
将需要排除延迟加载的页面slug添加到$excluded_slugs数组中。Slug通常是URL中页面名称的部分。例如，如果你的平板电脑页面URL是example.com/tablets/，那么slug就是tablets。

接下来，找到以下代码段：
```
if (

    ( function_exists( 'is_page' ) && is_page( $excluded_slugs ) )
    || ( function_exists( 'is_single' ) && is_single( $excluded_slugs ) )
    || (is_front_page())
    // || (is_page_template('home-v4.php'))
    // || (is_page_template('tablet.php'))

   /*
   IF YOU NEEED TO EXCLUDE BASED ON DIFFERENT RULES
    you can replace lines 41 and 42 with different conditionals, or add more conditions, for example:
    || ( is_front_page() )
    || ( is_category() )
    ... etc
    */

) {
```
登录后复制
这段代码定义了在哪些页面上应用排除规则。is_page()函数用于判断当前页面是否为指定的页面。is_front_page()函数用于判断当前页面是否为首页。你可以根据需要添加更多的条件，例如is_category()用于判断当前页面是否为分类页面。

最后，找到以下代码段：
```
$exclusions[] = 'jquery.min.js';
$exclusions[] = 'slick.min.js';
//$exclusions[] = 'script2.js';
//$exclusions[] = 'anotherInline';
```
登录后复制
将需要排除延迟加载的JS脚本文件名添加到$exclusions数组中。确保文件名与实际的文件名完全一致。
检查条件判断：

确保is_page()函数能够正确识别你的页面。如果你的页面使用了自定义页面模板，可以尝试使用is_page_template()函数，例如：
```
|| (is_page_template('home-v4.php'))
|| (is_page_template('tablet.php'))
```
登录后复制
注意替换home-v4.php和tablet.php为你的实际模板文件名。
插件加载优先级：

如果你的代码是通过代码片段插件添加的，需要设置较高的优先级，确保在WP Rocket加载之前执行。将以下代码添加到你的代码片段中：
```
add_filter( 'rocket_delay_js_exclusions',  __NAMESPACE__ . '\exclude_from_delay', 999 );
```
登录后复制
999是一个较高的优先级，可以确保该过滤器在其他过滤器之前执行。
联系官方支持：

如果以上步骤都无法解决问题，建议联系WP Rocket官方支持，寻求专业帮助。他们可能能够诊断出更深层次的问题。