Using jQuery BlockUI plugin upon page navigation (unload event)

Question

jQuery BlockUI plugin has a very cool feature of attaching itself to every AJAX call with simple code:

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

Can I use similar approach to display blockUI overlay on each navigation, like clicking any link etc.?

I think, this should be done using unload event, but I failed with this.

$(window).on('unload', function()
{
    $.blockUI;
});

Upon navigation blockUI overlay does not appears (I don't care about hiding it, because new loaded page won't have it).

I can even:

$(window).on('unload', function()
{
    console.log('$.blockUI;');
    $.blockUI;
    console.log('Bye!');
});

and I clearly see both $.blockUI; and Bye! messages in console, but no sign of blockUI overlay.

I've read that many browsers blocks displaying alert()'s in unload. Does it also covers blockUI? It shouldn't as it is just a bunch of divs or other DOM elements plus some styling?

Tested in Chrome 27, Internet Explorer 10 and Firefox 21. What am I missing or doing wrong?

Two or three years ago, in an old project, I manage to achieve above mentioned functionality, but it was done there purely by biding blockUI showup to particular buttons and menu items. I would like to avoid this as much as possible and make it globally, just as with AJAX calls.

Answer 1

I think there are two problems. I think the first problem is that you have to call the function $.blockUI() to produce the desired result.

The second problem is that the event seems to be too late. Consider beforeunload event:

$(window).on('beforeunload', function()
{
    $.blockUI();
});

I have created a jsfiddle which uses the beforeunload event, and it works very well.