6

サイトでPackery.js [ http://packery.metafizzy.co/ ] を使用していますが、ページの読み込み時にレイアウトの問題がいくつかあります。Masonry、Isotope、および Packery (すべて非常によく似たプラグインで、すべて David DeSandro によって開発されました) のドキュメントを参照し、すべての画像と Web フォントが読み込まれた後にレイアウトをトリガーする必要がある問題への対処について説明しています。

http://packery.metafizzy.co/appendix.html

私はPackeryをimagesLoadedで問題なく動作させています...しかし、Google Web Fontローダーをそれと結び付ける方法がわかりません。以下は、フォントをロードするための私のコードで、その後に imagesLoaded Packery Layout が続きます。Web Fonts と imagesLoaded の両方の後に Packery を起動する方法を誰かが提案できれば、私は永遠に感謝します.

// before <body>
<script type="text/javascript">
WebFontConfig = {
    google: {
        families: [ 'Bitter:400,700,400italic:latin' ]
    },
    typekit: {
        id: // hidden for obvious reasons
    }
};
(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>

// after </body>
// jquery and plugins are loaded prior to the following code
jQuery(document).ready(function($) {

    var $container = $('section.home-page main');

    imagesLoaded( $container, function() {

        $container.packery({
            itemSelector: 'article',
            columnWidth: '.grid-sizer',
            gutter: '.gutter-sizer'
        });

    });

});
4

3 に答える 3

3

これは完全に機能します。

<script>
  function loadIsotope(){
      var $container = $('section.home-page main');

      imagesLoaded( $container, function() {

          $container.packery({
              itemSelector: 'article',
              columnWidth: '.grid-sizer',
              gutter: '.gutter-sizer'
          });
      });
  }

  WebFont.load({
    google: {
      families: ['Bitter']
    },
    active: function() {
        // This event is triggered when the fonts have rendered.
        loadIsotope();
    },
    inactive:function(){
        // This event is triggered when the browser does not support
        // linked fonts or if none of the fonts could be loaded.
        loadIsotope();
    }
  });
</script>
于 2015-03-11T12:53:51.023 に答える
2

ProllyGeek が言ったように、非同期ソリューションの方が合理的です。コードは次のようになります (私がテストしました – 動作します):

<script>
var loadedImages = false;
var loadedFonts = false;

function loadedEverything() {
        return (loadedImages && loadedFonts);
}

function loadMasonry() {
        console.log("Loading masonry");
}

WebFontConfig = {
        google: {
                families: ['Droid Sans']
        },
        active: function() {
                loadedFonts = true;
                if (loadedEverything()) loadMasonry();
        }
};

imagesLoaded( document.querySelector('.container'), function(instance) {
        loadedImages = true;
        if (loadedEverything()) loadMasonry();
});
</script>

読み込みが遅くなると、必要なイベントが発生します。

于 2015-03-17T09:12:03.237 に答える