我需要加载三个Javascript脚本-
imagesLoaded.js lazyload-1.8.4.jscd.js
cd.js 包含使用
imagesLoaded.js 和
lazyload-1.8.4.js.
是全部加载还是单独加载？
function add_my_script() {
wp_enqueue_script(
\'imagesLoaded\',
get_template_directory_uri() . \'/js/imagesLoaded.js\',
array(\'jquery\'),
\'lazyload\',
get_template_directory_uri() . \'/js/lazyload-1.8.4.js\',
array(\'jquery\'),
\'cd\',
get_template_directory_uri() . \'/js/cd.js\',
array(\'jquery\')
);
}
add_action( \'wp_enqueue_scripts\', \'add_my_script\' );
有效的代码
add_action( \'wp_enqueue_scripts\', \'add_my_script\' );
function add_my_script() {
wp_register_script(\'imagesLoaded\',get_template_directory_uri() . \'/js/imagesLoaded.js\', array(\'jquery\'),true);
wp_register_script(\'lazyload\',get_template_directory_uri() . \'/js/lazyload-1.8.4.js\', array(\'jquery\'),true);
wp_register_script(\'cd\',get_template_directory_uri() . \'/js/cd.js\', array(\'jquery\',\'imagesLoaded\',\'lazyload\'),true);
wp_enqueue_script(\'imagesLoaded\');
wp_enqueue_script(\'lazyload\');
wp_enqueue_script(\'cd\');
}
最合适的回答,由SO网友:s_ha_dum 整理而成
我尽我所能格式化了代码，一旦格式化，它显然是非常破碎的。wp_enqueue_script 采用5个参数。你有9个。前五项中有几项是错误的。我希望你会看到错误，如果你debugging enabled.
您似乎试图将所有脚本都排在同一个队列中wp_enqueue_script. 你不能那样做。也许这就是你要问的，但问题并不十分清楚。
function add_my_script() {
wp_enqueue_script(
\'imagesLoaded\',
get_template_directory_uri() . \'/js/imagesLoaded.js\',
array(\'jquery\')
);
wp_enqueue_script(
\'lazyload\',
get_template_directory_uri() . \'/js/lazyload-1.8.4.js\',
array(\'jquery\')
);
wp_enqueue_script(
\'cd\',
get_template_directory_uri() . \'/js/cd.js\',
array(\'jquery\',\'imagesLoaded\',\'lazyload\')
);
}
add_action( \'wp_enqueue_scripts\', \'add_my_script\' );
我还补充道
imagesloaded 和
lazyload 作为的依赖项
cd, 我认为这是正确的。我不知道
imagesloaded 取决于
lazyload 或者反过来，但是如果您要注册/排队（您应该这样做），那么请正确地使用依赖项杂耍。这是该系统最棒的地方之一。
SO网友:Chip Bennett
作为@s\\u ha\\u dum答案的必然结果，您还可以注册具有分层声明依赖项的脚本，然后将最终脚本排队。大概是这样的：
function add_my_script() {
// Register first script, dependent on jQuery
wp_register_script(
\'imagesLoaded\',
get_template_directory_uri() . \'/js/imagesLoaded.js\',
array( \'jquery\' )
);
// Register second script, dependent on first script
wp_register_script(
\'lazyload\',
get_template_directory_uri() . \'/js/lazyload-1.8.4.js\',
array( \'imagesLoaded\' )
);
// Enqueue third script, dependent on second script
wp_enqueue_script(
\'cd\',
get_template_directory_uri() . \'/js/cd.js\',
array( \'lazyload\' )
);
}
add_action( \'wp_enqueue_scripts\', \'add_my_script\' );
从功能上来说，这真的没有什么区别；这主要是偏好的问题。我喜欢为每个脚本显式声明所有依赖项，但这种方法更为简捷。
SO网友:user2116497
var scrArr = [
[ get_template_directory_uri() . \'/js/imagesLoaded.js\',false],
[ get_template_directory_uri() . \'/js/lazyload-1.8.4.js\',true],
[ get_template_directory_uri() . \'/js/cd.js\',true]
];
var scrArrSrl = []; // js Serial Load Array
var scrArrPrl = []; // js Parallel Load Array
while (scrArr.length) {
var scrArrEl = scrArr.shift();
if (scrArrEl[1]) {
scrArrSrl.push(scrArrEl[0]);
} else {
scrArrPrl.push(scrArrEl[0]);
}
}
creScrSrl = function(src,id,par,typ) {
id = id || src.split(\'/\').pop().split(\'.\').slice(0,-1).join(\'.\');
var newScr = document.getElementById(id);
if (!newScr) {
newScr = document.createElement(\'script\');
newScr.id=id;
if (!!typ) {newScr.type = typ};
newScr.src = src;
par = par || document.head;
newScr.onload = function () {
if (scrArrSrl.length) {creScrSrl(scrArrSrl.shift())}
}
par.appendChild(newScr);
}
}
creScrPrl = function(src,id,par,typ) {
id = id || src.split(\'/\').pop().split(\'.\').slice(0,-1).join(\'.\');
var newScr = document.getElementById(id);
if (!newScr) {
newScr = document.createElement(\'script\');
newScr.id=id;
if (!!typ) {newScr.type = typ};
newScr.src = src;
par = par || document.head;
par.appendChild(newScr);
}
}
creScrSrl(scrArrSrl.shift());
while (scrArrPrl.length) {creScrPrl(scrArrPrl.shift())}
就我而言，
cd.js 将等到
lazyload-1.8.4.js 已加载。但是
lazyload-1.8.4.js 不会等待
imagesLoaded.js 负载所以
cd.js 不会等待
imagesLoaded.js 也是，因为他们之间没有链条。
我在代码中使用它，它可以工作，但速度不是很快。
onLoadInit.js File in GitHub, 我使用同样的逻辑。
如果你需要更快的速度，我想你应该使用Promise，CustomEvent
