在 WordPress 站点中加载 jquery.js 后加载 javascript 代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12225664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load javascript code after jquery.js has loaded in WordPress site
提问by Sarthak Patel
I have a custom jquery-based slider on homepage of a WordPress site. I'm loading jQuery (jquery.js) and the slider js (jquery.advanced-slider.js) using below code in my functions.php file of my theme.
我在 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');
add_action('wp_enqueue_scripts', 'my_load_scripts');
Now I put the below code in my header.php file BEFORE wp_head();
现在我把下面的代码放在我的 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>
It's obvious here that my jquery.js and jquery.advanced-slider.js load after the JavaScript code above and thus my slider doesn't work. If I put it after wp_head() call in <head>the slider works.
很明显，我的 jquery.js 和 jquery.advanced-slider.js 在上面的 JavaScript 代码之后加载，因此我的滑块不起作用。如果我把它放在<head>滑块工作中的wp_head() 调用之后。
But if I put it after wp_head() wouldn't that be a hack? I want my code to be clean. As twentyeleven theme clearly says
但是如果我把它放在 wp_head() 之后，那不是黑客吗？我希望我的代码干净。正如 211 主题清楚地表明的那样
/* 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.
*/
I'm very confused here. I might be missing something very simple clue here. But help me out guys. What would be the best way to put the JavaScript before wp_head() and yet have it load after jquery.js and slider.js have loaded?
我在这里很困惑。我可能在这里遗漏了一些非常简单的线索。但是帮帮我吧伙计们。将 JavaScript 放在 wp_head() 之前并在 jquery.js 和 slider.js 加载之后加载它的最佳方法是什么？
回答by cspolton
Add your script block to the bottom of the HTML page, just before the </body>.
将您的脚本块添加到 HTML 页面的底部，就在</body>.
Your slider init JS code won't get executed until the full DOM has been parsed in the browser anyway so there is no disadvantage to this.
无论如何，在浏览器中解析完整 DOM 之前，您的滑块 init JS 代码不会被执行，因此这没有缺点。
In fact web performance experts like Steve Souders suggest that script blocks should be added at the end of your HTML pageas script blocks block rendering and the page appears to load faster this way.
事实上，像 Steve Souders 这样的网络性能专家建议应该在 HTML 页面的末尾添加脚本块，因为脚本块会阻止渲染，并且页面似乎以这种方式加载得更快。
回答by piatek
As per wordpress function reference:
根据 wordpress 函数参考：
The safe and recommended method of adding JavaScript to a WordPress generated page is by using wp_enqueue_script(). This function includes the script if it hasn't already been included, and safely handles dependencies.
将 JavaScript 添加到 WordPress 生成的页面的安全且推荐的方法是使用 wp_enqueue_script()。如果脚本尚未包含，则此函数包含该脚本，并安全地处理依赖项。
If you want to keep your "code clean" you might rethink how your js is organised. My approach with wordpress is to (usually) keep a scripts.js for all initialisation and small scripts and separate file(s) for plugins. But everything depends how big and how many files you have - you want to avoid too many http requests and files that are hard to manage.
如果你想保持你的“代码干净”，你可能会重新考虑你的 js 是如何组织的。我使用 wordpress 的方法是（通常）为所有初始化和小脚本保留一个 scripts.js，并为插件保留单独的文件。但一切都取决于你有多大和有多少文件——你想避免太多难以管理的 http 请求和文件。
As well, wp_enqueue_script lets you place the scripts in the footer. http://codex.wordpress.org/Function_Reference/wp_enqueue_script
同样， wp_enqueue_script 允许您将脚本放在页脚中。 http://codex.wordpress.org/Function_Reference/wp_enqueue_script
回答by Krishna Kumar
Wait for loading jQuery with window.onloadfunction, once jQueryfile and other js / content loaded then window.onloadfunction will be fire.
等待加载带有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>
回答by William Patton
The code that you are adding to the bottom of the page should be externalized to it's own file and added with the wp_enqueue_script();function like shown below.
您添加到页面底部的代码应该外部化到它自己的文件中，并添加wp_enqueue_script();如下所示的功能。
Note the use of the 'true' directive at the end of each call to wp_enqueue_script. That tells WordPress that you want them included at the wp_footer();hook (instead of the wp_head();hook) which should appear directly before the closing </body>tag - as per the performance best practices that others have mentioned.
请注意在每次调用 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');
I've removed the jQuery enqueue line you had included because you shouldn't need to register the jQuery script as it's already registered by the WP core and since you have defined it as one of the dependencies it will be included for you.
我删除了您包含的 jQuery enqueue 行，因为您不需要注册 jQuery 脚本，因为它已经由 WP 核心注册，并且因为您已将其定义为依赖项之一，它将为您包含在内。
Since you have wrapped it all in an is_home()conditional statement the all 3 of these files - plus jQuery - will be included in just the homepage.
由于您已将其全部包装在is_home()条件语句中，因此所有 3 个文件 - 加上 jQuery - 将仅包含在主页中。
回答by Magor Menessy
An easier - but maybe not so nice - hack is to simply add a 1-millisecond timeout
一个更简单的 - 但也许不是那么好 - hack 是简单地添加一个 1 毫秒的超时
setTimeout(function () {
jQuery('#text-6').insertBefore('#header');
}, 1);
