The only pity thing is, that I don’t remember its original author.
The solution is really simple. First, declare new attribute on your body (in your main layout file):
<body data-root="<?php echo(Yii::app()->request->baseUrl); ?>">
var rootPath = document.body.getAttribute("data-root");
$.blockUI.defaults.message = ‘<img src="’ + rootPath + ‘/img/wait.gif" width="48" height="48" />Busy…’;
Once again — this is only a snippset or example of solution. The entire problem can by much easier and faster solved, using CSS and a class with static path to file used as some object background.
Or even, fabulous Font Awesome library:
$.blockUI.defaults.message = ‘<i class="icon-spinner icon-spin icon-large"></i>Operation in progress…’;
Yes, I know that. I only wanted to show an alternative approach. Is that fine with you?
Note, that you have to use CSS-based approach, if you want to use an image anywhere withing
onbeforeunload event. Since there is a nasty bug in Chrome and Firefox (or this is undocumented standard, that only IE breaks again), images referenced by
<img /> tag aren’t shown, when object containing then is displayed at
onbeforeunload. In this StackOverflow question you should find more details.
Again, I’m really sorry, that I don’t remember original author of this solution.