Detect when an iframe ends loading

I build a menu dynamically and load the different menu options in an iframe .

Problem : I have options that take longer to load than others (this depends on the amount of data that the option loads).

As another data: I have block-ui to block AJAX requests in my application, and it works quite well, I block the start of an AJAX request showing a wait message and release when the request returns a value. This is the idea I want to achieve with iframe

What do I need?

-I know the moment when the iframe is loading, it's not a problem.- Here I lock the screen, but I do not know when to release it.

I need an event in JavaScript to help me identify when iframe finishes loading.

This is the iframe :

<iframe id="mainFrame" name="mainFrame" onunload="desbloquear();" src="" width="900" height="315" frameborder="0" allowfullscreen></iframe>

The html of the menu is built with this structure:

<a class='anchor' href='#' data-url='../" + row.PATH + "'><i class='" + row.ICON + "'></i><span style='white-space: normal'>" + row.NOMBRE + "</span>

And the JavaScript that loads the iframe :

$(".anchor").each(function () {
    var el = $(this);
    el.click(function () {
        bloquear(); //Aquí bloqueo la pantalla
        $("#mainFrame").attr("src", el.data('url'));
        $("#mainFrame").attr("", );

    })
});  

I have a function desbloquear(); , obviously it does not work placing at the end of the JavaScript that loads the iframe , because it may take a while to load and it is what I can not detect.