2

優れたjQueryMasonryプラグインを使用して、一連のボックスをモザイクのようなピンタレストに再配置するスクリプトがページにあります。ページの下部（直前）から、次のようなボックスレイアウトレンダリングメソッドを呼び出します。

<script type="text/javascript">
  $(function() {
    wall.drawBoxes();
  });
</script>

タグの直後に、次のようなgooglewebフォントも使用します。

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] }
  };
  (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);
  })(); 
</script>

問題は、フォントがロードされる前にボックスがレンダリングされることです。また、フォントが読み込まれると、ボックスのサイズが大きくなり、レンダリングされたモザイクレイアウトががらくたのように見えます。

それを防ぐために何ができますか？

4

5 に答える 5

2

コールバックを追加でき loadingます-すべてのフォントの読み込みが完了すると起動します。

$(document).ready(function() {

  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] },
    loading: function() {wall.drawBoxes()}
  };
  (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-06-14T13:07:22.333 に答える
2

fontactiveフォントの読み込みが完了すると起動するコールバックを追加しました。

$(document).ready(function() {

  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] },
    fontactive: function(fontFamily, fontDescription) { wall.drawBoxes() }
  };
  (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-06-14T15:55:19.463 に答える
1

drawboxes呼び出しの前にWebフォント呼び出しを移動して、最初にフォントをロードすることができます。

関数をdomready関数に移動することをお勧めします。例えば

<head>DOMがロードされる前に、フォント呼び出しをに入れてフォントをロードすることもできます。

グーグルスタイルシートをロードしていただけませんか？<link href="http://fonts.googleapis.com/css?family=Lobster:regular" rel="stylesheet" type="text/css" > 

$(document).ready(function() {

  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] }
  };
  (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);
  })(); 

  $(function() {
    wall.drawBoxes();
  });

});
于 2012-06-13T16:30:35.957 に答える
1

activeコールバックを追加できます-すべてのフォントがレンダリングされたときに発生します。

$(document).ready(function() {

  WebFontConfig = {
    google: { families: [ 'Montserrat::latin' ] },
    active: function() {wall.drawBoxes()}
  };
  (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);
  })(); 

});

利用可能なイベントのリファレンスについては、webfontloaderのreadmeを参照してください。

于 2014-04-28T15:26:14.607 に答える
-1

cssを使用する方が簡単です。

@import url(http://fonts.googleapis.com/css?family=....);
于 2012-06-13T16:31:33.193 に答える