Question

While developing an app in HTML and jQuery, I have a loading screen that covers the entire page, then fades out when the content has loaded, as shown below:

google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    $(".loading").delay(2600).fadeOut({
        useTranslate3d: true,
    });
});

(If anyone’s wondering why there’s a delay on the fade, it’s so that’s there’s a little bit of buffer time between the loading action and fading out)

What I’m trying to accomplish is that when the div doesn’t fade out after a certain number of seconds, say a minute (or recommend a better time), then the div fades out and an error message occurs, saying the resources failed to load.

Answer 1

var failedTimeout = setTimeout(function() {
    alert('resources failed to load');
}, 60000);

google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    clearTimeout(failedTimeout);
    $(".loading").delay(2600).fadeOut({
        useTranslate3d: true,
    });
});