首页 > 编程语言> > 在jquery.js加载到WordPress站点后加载javascript代码

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

2019-07-25 22:35:04 作者：互联网

我在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’);

现在我把下面的代码放在我的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()之后就不会是黑客攻击？我希望我的代码干净.正如二十四岁的主题清楚地说的那样

/* 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.
     */

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

解决方法:

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

你的slide init JS代码不会被执行,直到在浏览器中解析完整的DOM,所以这没有任何缺点.

事实上,像Steve Souders suggest that script blocks should be added at the end of your HTML page这样的网络性能专家作为脚本块会阻止渲染,并且页面似乎以这种方式加载更快.

标签：javascript,jquery,wordpress,wordpress-theming
来源： https://codeday.me/bug/20190725/1537560.html