在jquery.js已加载到WordPress网站后加载javascript代码 _加载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()添加；功能如下图所示。
【在jquery.js已加载到WordPress网站后加载javascript代码】请注意, 在每次调用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毫秒的超时时间