on unload event blocks images from rendering?

Question

I have the following scenario. When the user is about to leave the website I show him a confirmation message and at that moment I also modify the DOM a little bit. Despite the fact I get to modify the DOM, the images (even if they are preloaded will not appear). I have also tried with Ajax but it looks as if during that moment all connections are blocked?

Here's my example code:

<div id="content">
    my original content...
</div>

<button id="trigger">click</button>

<script type="text/html" id="template">
    <div>
        <img src="/css/images/dmbtest.gif"/>
    </div>
</script>

<script type="text/javascript">
    $(function(){
        window.onbeforeunload = function() {
            $('#content').html($('#template').html());
            window.onbeforeunload = null;
            return "some cool message";
        }
    });
</script>

Any suggestions? Would also love to be able to load the content via Ajax but... :(

Answer 1

What if you rendered the #template HTML in a hidden div and instead of writing HTML to the #content onbeforeunload, you just show/hide the unload content you wish to display?

I suspect that since the browser is essentially locked, it can't do the async writing like images that it needs to do. If you show/hide, this async writing will already be done.

Just a guess but I think that will work?

EDIT: Oops. I assumed your 'dont leave' notificaton was an alert, which would lock. I realize now that that's not what you're doing, so ignore that bit :)