Using Fancybox loaded async

I am loading the Fancybox lib async inside a onload function:

function myLoad(){
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'miurl.com';
    var x = document.getElementsByTagName('script')[document.getElementsByTagName('script').length - 1];
    x.parentNode.insertBefore(s, x);
}

<body onload="myLoad()">

The script is added to my head, but when i try:

$("#myDiv").fancybox();

After execute myLoad(), the console says "Uncaught TypeError: undefined is not a function" in the fancybox plugin call.

Any ideas ?

Solution

Turning my comment into an answer since it solved your problem:

You have to "wait" for the script to finish loading before trying to use it. Loading something async means it will load in the background and finish loading sometime later while other things in the loading process continue.

If you have jQuery already available, you can use $.getScript() and use the success handler callback function to know when it has finished loading.

$.getScript(yourFancyBoxCodeURLHere, function() {
    $("#myDiv").fancyBox();
});