加载JavaScript代码的jquery.js在WordPress网站加载之后(Load java

2019-09-22 01:36发布

我有一个WordPress网站的主页基于jQuery的自定义滑块。 我加载的jQuery(的jquery.js)和我的主题我的functions.php文件使用下面的代码滑块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');

现在我把下面的代码在我的header.php文件之前wp_head();

<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代码后,我的滑块不起作用。 如果我把它wp_head()调用之后在<head>的滑块作品。

但是,如果我把它wp_head()之后,那不是一劈? 我想我的代码是干净的。 作为twentyeleven主题明确表示

/* 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加载后加载的最佳方式?

Answer 1:

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

你的滑块初始化JS代码将不会执行,直到整个DOM已经在浏览器中被解析反正所以没有缺点了这一点。

其实网络性能专家像史蒂夫Souders的建议脚本块应该在你的HTML页面的末尾添加为脚本块阻塞渲染和页面显得加载速度更快这种方式。



Answer 2:

按照WordPress的功能参考:

添加JavaScript以一个WordPress生成的页面的安全和推荐方法是通过使用wp_enqueue_script()。 这个功能包括脚本,如果尚未列入它,并安全地处理依赖性。

如果你想保持你的“代码干净”你可能会重新考虑你的JS是如何组织的。 我与WordPress的方法是(通常)保持scripts.js中为所有的插件初始化和小脚本和单独的文件(S)。 但一切都取决于有多大,有多少文件,你有 - 你想避免过多的HTTP请求,是很难管理的文件。

同时,wp_enqueue_script让您将脚本在页脚。 http://codex.wordpress.org/Function_Reference/wp_enqueue_script



Answer 3:

等待与加载的jQuery window.onload功能,一旦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>


Answer 4:

要添加到页面底部的代码应该被外部化到它自己的文件,并添加wp_enqueue_script(); 功能类似于如下所示。

注意在每次通话结束时使用“真”指令到wp_enqueue_script。 这告诉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');

我已经删除你有包括在内,因为你不需要因为它已经由WP核心,因为你已经定义它,因为它会被列入你的依赖关系的一个登记注册的jQuery脚本jQuery的排队线。

既然你已经把它包在所有的is_home()条件语句这些文件的全部3 -加jQuery的-将被列入只是首页。



Answer 5:

一种更容易 - 但也许不是那么好 - 黑客是简单地增加一个1毫秒超时

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


文章来源: Load javascript code after jquery.js has loaded in WordPress site