在jquery.js已加载到WordPress网站后加载javascript代码

我在WordPress网站的首页上有一个基于jquery的自定义滑块。我正在主题主题的functions.php文件中使用以下代码加载jQuery(jquery.js)和滑块js(jquery.advanced-slider.js)。

function my_load_scripts() {
  if (!is_admin()) {
    wp_enqueue_script("jquery");

    if (is_home()) {
      wp_enqueue_script('theme-advanced-slider', get_template_directory_uri().'/js/jquery.advanced-slider.js', array('jquery'));
      wp_enqueue_script('theme-innerfade', get_template_directory_uri().'/js/innerfade.js', array('jquery'));
    }
  }
}

add_action(‘wp_enqueue_scripts’, ‘my_load_scripts’);

现在, 在wp_head();之前, 将以下代码放入header.php文件中。

<script type="text/javascript">
  var $j = jQuery.noConflict();

  $j(document).ready(function () {
    //Slider init JS
    $j(".advanced-slider").advancedSlider({
      width: 614, height: 297, delay: 1000, pauseRollOver: true
    });
  });
</script>

很明显, 我的jquery.js和jquery.advanced-slider.js在上面的JavaScript代码之后加载, 因此我的滑块不起作用。如果我将它放在<head>中的wp_head()调用之后, 则滑块会起作用。

但是, 如果我把它放在wp_head()之后, 那不是hack吗？我希望我的代码干净。正如二十一个主题明确地说的

/* Always have wp_head() just before the closing </head>
     * tag of your theme, or you will break many plugins, which
     * generally use this hook to add elements to <head> such
     * as styles, scripts, and meta tags.
     */

我在这里很困惑。我可能在这里缺少一些非常简单的线索。但是帮帮我。将JavaScript放在wp_head()之前但又在jquery.js和slider.js加载之后又将其加载的最佳方法是什么？

#1

在</ body>之前, 将你的脚本块添加到HTML页面的底部。

无论如何, 直到在浏览器中解析了完整的DOM后, 你的滑块初始化JS代码才会执行, 因此这样做没有任何缺点。

实际上, 像Steve Souders这样的网络性能专家建议, 应在HTML页面的末尾添加脚本块, 因为脚本块会阻止呈现, 并且此页面似乎可以更快地加载。

#2

根据wordpress功能参考：

将JavaScript添加到WordPress生成的页面的安全且推荐的方法是使用wp_enqueue_script()。如果尚未包含此脚本, 则此函数将包含该脚本, 并安全地处理依赖关系。

如果你想保持”代码整洁”, 则可以重新考虑js的组织方式。我使用wordpress的方法是(通常)为所有初始化和小脚本保留一个scripts.js, 并为插件保留单独的文件。但是, 一切都取决于你拥有的文件大小和数量-你要避免太多的HTTP请求和难以管理的文件。

同样, wp_enqueue_script允许你将脚本放在页脚中。 http://codex.wordpress.org/Function_Reference/wp_enqueue_script

#3

等待使用window.onload函数加载jQuery, 一旦jQuery文件和其他js /内容加载完毕, 就会启动window.onload函数。

<script type="text/javascript">
window.onload = function(){

var $j = jQuery.noConflict();
    $j(".advanced-slider").advancedSlider({
        width:614, height:297, delay:1000, pauseRollOver:true
    });
}
</script>

#4

你要添加到页面底部的代码应外部化为其自己的文件, 并使用wp_enqueue_script()添加；功能如下图所示。

请注意, 在每次调用wp_enqueue_script的末尾都使用’true’指令。这告诉WordPress你希望它们包含在wp_footer()中；钩子(而不是wp_head();钩子)应直接出现在</ body>标记之前-根据其他人提到的性能最佳实践。

function my_load_scripts() {

    if (is_home()) {
        wp_enqueue_script('theme-advanced-slider', get_template_directory_uri().'/js/jquery.advanced-slider.js', array('jquery'), true);
        wp_enqueue_script('theme-innerfade', get_template_directory_uri().'/js/innerfade.js', array('jquery'), true);
        wp_enqueue_script('your-custom-script', get_template_directory_uri().'/js/yourcustomscript.js', array('jquery'), true);
        }
    }

}
add_action('wp_enqueue_scripts', 'my_load_scripts');

我已经删除了你包括的jQuery排队行, 因为你不需要注册jQuery脚本, 因为它已经被WP核心注册, 并且因为你已将其定义为依赖项之一, 所以将为你包括。

由于你已将所有内容包装在is_home()条件语句中, 因此所有这3个文件(加上jQuery)都将仅包含在首页中。

#5

更简单(但可能不是很好)的黑客方法是简单地添加1毫秒的超时时间

setTimeout(function () {
    jQuery('#text-6').insertBefore('#header'); 
}, 1);

来源：

https://www.srcmini02.com/65597.html

#1

#2

#3

#4

#5

猜你喜欢