Menu
I'm merging the use of the YouTube iFrame API and jQuery loaded in through a script tag that has the defer flag set. The defer flag must be set as the client has a perfect Google page insight score and wishes to maintain that score.
The YouTube API, upon being fully loaded and ready for use, immediatley calls a function that I define onYouTubeIframeAPIReady. It will then later call onPlayerReady upon the player being fully loaded and rendered.
I wish to use jQuery in this function, but just using jQuery inside the onPlayerReady function will be creating a race condition (hoping the jQuery library has finished loading by the time onPlayerReady gets called).
It occured to me a workable solution would be to use the onPlayerReady function to set a variable before calling a function that tests for both the player and jQuery. Another function sets a variable upon jQuery being ready and calls the same test function.
I have some code that works, but the part that checks for jQuery seems messy to me, and also introduces a small amount of extra unneccessary delay. I was wondering if anyone knows of a better way to run something the instant jQuery becomes available. Basically, are there callbacks for jQuery becoming available built into the library itself?
My current code is as follows:
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
};
722
The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
Use the pagecontainerload event instead. The pageload event is triggered after the page has been successfully loaded and inserted into the DOM. Related events: pagebeforeload - triggered before any load request is made.
The trigger() method triggers the specified event and the default behavior of an event (like form submission) for the selected elements. This method is similar to the triggerHandler() method, except that triggerHandler() does not trigger the default behavior of the event.
If you want native JS to trigger click event without clicking then use the element id and click() method of JavaScript.
As suggested by @KevinB you can utilize load event of specific <script> element
<!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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
