Preloading bootstrap glyphicons

Question

Is there a way to preload bootstrap's glyphicons?

I have a "Next"-Button, that shows a spinning "reload" glyphicon when pressed.

(normal state text = "Next", changes to loading spinner when pressed)

$('button#next').on('click', function nextProblem() {
    addSpinner.call($(this));
    redirectToNext();
});

function addSpinner() {
    if (!$(this).eq(0).hasClass("spinning")) {
        $(this).eq(0).html('<span class="glyphicon glyphicon-refresh spinning"></span>');
    }
}

but the loading takes 245ms, and until then, there is nothing shown at all.

(it is intended to show a "loading" state in case the redirect takes longer). but right now, the button just becomes blank (for normal redirects that don't take longer than 2xx ms)

it's not the biggest deal ever, but it's not beautiful

how can i fix this?

Answer 1

Add the required glyphicons class to a html tag and load the html with "visibility:hidden" css.This will load the image.Once the image is loaded it will be cached by browser so when you use it at other place it will not take considerable amount to show the image.

Eg :

  <span style="visibility:hidden" class="glyphicon glyphicon-refresh spinning"></span>

or

<span class="glyphicon glyphicon-refresh spinning"></span>
**css:**
.spinning{
   visibility:hidden;
}