Chargement des polices lors du chargement de la page

Question

J'ai suivi un example pour implémenter une roulette lorsqu'un bouton est demandé. Ce code charge un font.

Mon problème est que le bouton appelle un ajax et la police est chargée après l'appel ajax (malgré le changement d'icône de bouton est d'abord demandé par javascript). Les ajax et les polices sont appelées à partir d'un serveur local. Ce serveur n'est pas multi-tâches et lorsque l'ajax est appelé, la police n'est pas chargée tant que l'appel ajax n'est pas terminé.

Existe-t-il un moyen de forcer le navigateur à charger la police au début lors du chargement de la page?

$('.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>

MISE À JOUR

Mon code a une telle 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'); 
    }); 

Answer 1

Alors cela va faire .. Une fois que la page se charge et le script est prêt. faire un appel ajax pour charger vos polices ..

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