Handling slow internet connection with Openlayers 2

Question

I'm creating a map app that uses maps from kortforsyningen.dk (ie. not google) and I'm using Openlayers 2.12 to get these maps and everything works fine when I've got an internet connection.

I use javascript and Apache Cordova in Visual Studio

The problem occurs when the connection is slow, or non-existent - the dreaded pink squares occur. My question is how to handle this situation.

I have looked around and I'm able to catch everytime such a problem is present and replace it with a picture of my choosing

layer.events.register('tileerror', this, onloadError);
    function onloadError(evt) {
        alert("something went wrong. is your internet connection ok?");
        evt.tile.setImgSrc("images/cordova.png");
        return false;
    }

Above, I simply show an alert that something is wrong and display a static image instead which is not very elegant

Openlayers 2 documentation suggests caching tiles offline for use with a spotty internet connection but this requires that the tile has successfully loaded at least once.

http://dev.openlayers.org/examples/offline-storage.html

Here is the question: Normally (online) when you zoom in on a map you get the more detailed map which shows more and more information.

However, if you have lost connection, instead of loading a more detailed map with openlayers you get pink squares while with Google Maps it takes the last successfully loaded (less detailed) map of that area and zooms in on that. The result is grainy map with little detail but it's better than pink squares.

Is it possible to implement something like what google maps does?

Alternatively, how do you guys solve the problem? Accept the pink squares? Just caching? Alerts?