How to detect when -webkit-mask-box-image has downloaded

Question

I generate an mask image on a web server programmatically, then apply it to a HTML element with the following code:

imageToMask.style["-webkit-mask-box-image"] = "url('" + featherURL +"') 100 stretch";

How can I find out when the image comes back and has finished downloading, so that it doesn't just pop onto the page?

Answer 1

You can probably do something similar to what @lonesomeday did in:

jQuery .on() not bound when script inserted into the DOM

Something along these lines:

 $('button').click(function() {
     var imageToMask = document.createElement('img');
     imageToMask.style["-webkit-mask-box-image"] = "url('" + featherURL +"') 100 stretch";

     imageToMask.onload = function() {
        //Custom behaviour
     };
     document.body.appendChild(imageToMask);
 });