Load fonts on page load

Question

I have followed an example to implement a spinner when a button is requested. This code loads a font.

My problem is that the button calls an ajax and the font is loaded after the ajax call (despite the button icon change is requested first by javascript). Both ajax and font are called from a local server. This server is not multi-task and the when the ajax is called the font is not loaded until the ajax call finishes.

Is there any way to force the browser to load the font at the beginning when the page loads?

$('.btn').on('click', function() {
    var $this = $(this);
  $this.button('loading');
    setTimeout(function() {
       $this.button('reset');
   }, 800000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div style="margin:3em;">
<button type="button" class="btn btn-primary btn-lg " id="load" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Submit Order</button>
<br>
  <br>
<button type="button" class="btn btn-primary btn-lg" id="load" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">Submit Order</button>
</div>

UPDATE

My code has such structure:

$(button).button('loading');

$.post("/my_page", 
    JSON.stringify({
            param: "1234",
                    }),
    function(data)
    {
        // ....
        $(button).button('reset');
    }
    )
    .fail(function(xhr, status, error)
    {
        // error handling
        $(button).button('reset');
    });

I can't see a font loaded after the timeout finished in your example. Do you want your button to use different font after the timeout?Please clarify. — threeFatCat, Jul 08 '17 at 01:54
@threeFatCat, what I want is that the font loads immediately when the page loads. So, before the button is pressed, the font is loaded. I cannot replicate the C++ server here. Please see the update. — ar2015, Jul 08 '17 at 02:10

score 0 · Answer 1 · answered Jul 08 '17 at 02:57

0

Then this will do.. Once the page loads and the script is ready.. make an ajax call to load your fonts..

$(document).ready(function(){
    //your ajax.. call here to load the font.
});

answered Jul 08 '17 at 02:57

threeFatCat

840
13
30

The ajax does not load the font. The ajax calls a page which takes a few seconds to respond. The font is loaded by bootstrap script out of my control. – ar2015 Jul 08 '17 at 03:36
You can try [this](https://stackoverflow.com/questions/4383226/using-jquery-to-know-when-font-face-fonts-are-loaded) – threeFatCat Jul 08 '17 at 03:56

Load fonts on page load

1 Answers1