All geek questions in one place

Trigger event on jQuery loading

I combine the use of the YouTube iFrame API and jQuery, loaded via a script tag that has a defer flag. The grace flag should be set, as the client has an ideal reading rate on the Google page and wants to keep this score.

The YouTube API, when fully loaded and ready to use, instantly calls the function that I define onYouTubeIframeAPIReady . Then it will call onPlayerReady when the player is fully loaded and displayed.

I want to use jQuery in this function, but just using jQuery inside the onPlayerReady function will create a race condition (hoping that the jQuery library will finish loading by the time onPlayerReady is called).

It seemed to me that a workable solution would be to use the onPlayerReady function to set a variable before calling a function that checks both the player and jQuery. Another function sets the variable when jQuery is ready and calls the same test function.

I have code that works, but the part that checks jQuery seems messy for me, and also introduces a little extra extra delay. I was wondering if anyone knows of a better way to run something when instant jQuery becomes available. Basically, are there any jQuery callbacks that become available built into the library?

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 };
+5
source share
3 answers

As suggested by @KevinB, you can use the load event for a 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 defer> const dojQueryStuff = (el, params) => this.jQuery(el, params).appendTo("body"); </script> <script defer> 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>
+1
source

I suppose .ready() will do.

 $(document).ready(function(){ ready.jquery = true; postLibraryLoad(); });

You may know, but ..
1. This will not result in a runtime error before loading jQuery and 2. It will be executed only once and only when jQuery is ready.

So, I suppose this code below works:

 var ready = { 'jquery': false, 'youtube': false }; $(document).ready(function(){ ready.jquery = true; postLibraryLoad(); }); function onYouTubeIframeAPIReady() { // Stuff } function onPlayerReady() { ready.youtube = true; postLibraryLoad(); } function postLibraryLoad() { if(!ready.jquery || !ready.youtube) { return; } // More stuff }

Assuming that onYouTubeIframeAPIReady() triggered somewhere else first, this code should run postLibraryLoad() up to two times, either after youtube is ready or jQuery is ready for work, eventually // More stuff only be executed then when both are ready.

edit: format
edit: description added

+1
source

I know this may seem strange, but if this little code bothers you, then why don't you add it inside the jQuery library below. and call onYouTubeIframeAPIReady() . you can also completely remove this part ready.jquery = true; .

+1
source

Source: https://habr.com/ru/post/1271693/

More articles:


All Articles