8

Web サイトに複数のフォントがありますが、読み込みが非常に遅く、フォントの読み込み時にそれらを読み込む必要がある jquery 機能がいくつかあります。

私はそれを呼び出してみました

jQuery(window).load(function () { 
 //my_function()
});

動作していません。

4

3 に答える 3

13

Google フォント ローダーのコールバック/イベントに関する 1 つの問題は、jQuery を使用している場合 (DOM が読み込まれるまでイベント ハンドラーを実行したくない場合があります)、すべてを確認する前に実行するリスクを冒したくないということです。フォントが読み込まれます。

これが私の解決策です。仮定:

  • Google フォント ローダーを使用しています
  • すべてのフォント、css、および DOM がロードされた後にのみ何かを実行したい
  • フォントローダーが起動する前にjQueryをロードしても問題ありません（私が使用しているため$.Callbacks()）

<script>これは、jQueryタグの直後に行うことです。

 var activeCallback = $.Callbacks();

 WebFontConfig = {
     google: { families: ['Open+Sans:400italic,400,300,600:latin'] },
     active: function () { activeCallback.fire(); }
 };

 // ...

そして、標準の jQuery 対応関数

 $(function() 
 {
    // start slide show when all fonts are loaded (need to calculate heights)
    activeCallback.add(function ()
    {
        startSlideshow();
    });

    // other DOM manipulation
 });

コールバックは、Google フォント ローダーが完了するたびに発生しますが、ドキュメントがまだ完了していない場合、完了するまでイベントは発生しません (これが jQueryコールバックの仕組みです)。

于 2013-03-20T01:51:55.393 に答える
1

イベントをキャプチャするには、フォントローダーを使用する必要があります。残念ながら、フォントをロードするクロスブラウザの方法はないので、GoogleWebFontLoaderを試してみることをお勧めします。

var WebFontConfig = {
  monotype: {  // Fonts.com 
    projectId: 'YourProjectId'
  },
  active: function() {
    // do something
  }
};

(function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();
于 2012-08-13T20:41:38.280 に答える
0

@ font-facesの読み込みプロセスを制御する場合は、GoogleとTypekitによって開発されたWebFontLoaderを使用してください。

https://developers.google.com/webfonts/docs/webfont_loader

于 2012-08-13T20:39:58.467 に答える