gpt4 book ai didi

javascript - 加载 jQuery 时触发事件

转载 作者:数据小太阳 更新时间:2023-10-29 05:21:23 26 4
gpt4 key购买 nike

我正在合并使用 YouTube iFrame API 和通过设置了 defer 标志的脚本标记加载的 jQuery。必须设置延迟标志,因为客户拥有完美的 Google 页面洞察分数并希望保持该分数。

YouTube API 在完全加载并准备好使用后,立即调用我定义的函数 onYouTubeIframeAPIReady。稍后它会在播放器完全加载和渲染时调用 onPlayerReady

我希望在此函数中使用 jQuery,但仅在 onPlayerReady 函数中使用 jQuery 会产生竞争条件(希望在调用 onPlayerReady 时 jQuery 库已完成加载)。

我想到一个可行的解决方案是使用 onPlayerReady 函数设置一个变量,然后再调用一个测试播放器和 jQuery 的函数。另一个函数在 jQuery 就绪时设置一个变量并调用相同的测试函数。

我有一些有效的代码,但检查 jQuery 的部分对我来说似乎很困惑,并且还引入了少量额外的不必要延迟。我想知道是否有人知道在 jQuery 可用时运行某些东西的更好方法。基本上,库本身是否内置了 jQuery 可用回调?

我目前的代码如下:

var ready = {
'jquery': false,
'youtube' false
},
testJQueryLoaded;

testJQueryLoaded = function() {
if(typeof jQuery == 'undefined') {
window.setTimeout(function() {
testJQueryLoaded();
}, 25);
return;
}

ready.jquery = true;
postLibraryLoad();
};

testJQueryLoaded();

function onYouTubeIframeAPIReady() {
// Stuff
};

function onPlayerReady() {
ready.youtube = true;
postLibraryLoad();
};

function postLibraryLoad() {
if(!ready.jquery || !ready.youtube) {
return;
}

// More stuff
};

最佳答案

根据@KevinB 的建议,您可以使用 load具体事件<script>元素

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" defer></script>
<script>
const dojQueryStuff = (el, params) => this.jQuery(el, params).appendTo("body");
</script>
<script>
document
.querySelector("script[src$='3.2.1/jquery.min.js']")
.onload = event => {
console.log(event.target.src);

dojQueryStuff("<div>", {
html: "jQuery version: " + this.jQuery().jquery + " loaded"
});
}
</script>
</head>

<body>
</body>

</html>

关于javascript - 加载 jQuery 时触发事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46159213/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com