CODEWITHSUNDEEP
jquerymobileoverlaydocument-ready
David Vasquez
David Vasquez

Reputation: 1223

Is it possible to not trigger a script if a page loads quickly enough?

So here's some background.

I have a mobile web site where I have setup an overlay with an iOS spinner and white screen that covers the entire page's contents. On document.ready the spinner and screen is shown immediately and displays until the page's contents are completely loaded – at which point the screen and spinner fade away revealing the page contents.

This all works fine. However, I want to polish up the script a bit and NOT show the overlay & spinner if the page loads quickly enough. Many of these pages will be very light-weight (and if the user has visited them before – previously cached) and having a spinner & overlay blink in momentarily for a second or less is useless and potentially confusing. However, there's great value in having this when a page is taking more than a couple seconds to load.

I'm trying to find a way to execute the script ONLY when the page is taking longer than say a second to load. At first I thought I could simply tell the script to wait a second to execute, but in doing so, the user sees a flash of content as the DOM builds out the html structure of the page - which is then hidden if all assets aren't finalized within a second's time.

Clearly this is confusing to the user and is unacceptable.

Another way to look at this is, "If the page is cached/loads quickly – don't show the spinner & overlay. Otherwise, go ahead and show it."

Is there any way to accomplish this?

Here's the code I'm currently using (this is making use of jquery & spin.js):

// invoke spin.js
$(document).ready(function() {

    var $overlayScreen = $('<div id="pageLoader" class="overlay pageLoad"></div>');
    $('body').append($overlayScreen);

    var opts = {
      lines: 13, // The number of lines to draw
      length: 7, // The length of each line
      width: 4, // The line thickness
      radius: 10, // The radius of the inner circle
      rotate: 0, // The rotation offset
      color: '#000', // #rgb or #rrggbb
      speed: 1, // Rounds per second
      trail: 60, // Afterglow percentage
      shadow: false, // Whether to render a shadow
      hwaccel: true, // Whether to use hardware acceleration
      className: 'spinner', // The CSS class to assign to the spinner
      zIndex: 2e9, // The z-index (defaults to 2000000000)
      top: 'auto', // Top position relative to parent in px
      left: 'auto' // Left position relative to parent in px
    };
    var target = document.getElementById('pageLoader');
    var spinner = new Spinner(opts).spin(target);
});

// check to see if the page has loaded yet.  If it has, hide the loader div
$(window).load(function() {
    $('#pageLoader').addClass('loadComplete');
});

Upvotes: 0

Views: 282

Answers (1)

Kyle Ross
Kyle Ross

Reputation: 2160

The problem is, there is no way for you to check how long the page will take to load prior to the page loading. The only way to do this would be to have a delay on showing the loading spinner for roughly 1 to 1.5 seconds and have that delay cleared if the page has finished loading before the spinner is shown. This is really the only way that I can think this could be done.

$(document).ready(function() {
    var overlayTimer = setTimeout(function() { 
        $('<div id="pageLoader" class="overlay pageLoad"></div>').appendTo('body');
    }, 1500);

    // other code for the spinner here

    $(window).load(function() {
        clearTimeout(overlayTimer);
        $('#pageLoader').addClass('loadComplete');
    });
});

That is the only thing that I can think of that would fit your needed situation. Not the best solution since there will still be a 1.5 second delay before the spinner is shown if needed to be shown.

Upvotes: 1

Related Questions