6

我在一个网站上使用 Packery.js [ http://packery.metafizzy.co/ ]，并且在页面加载时遇到了一些布局问题。我查看了 Masonry、Isotope 和 Packery 的文档（所有非常相似的插件，都由 David DeSandro 开发），它讨论了在加载所有图像以及任何 webfonts 后应该触发布局的问题。

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

我让 Packery 与 imagesLoaded 一起工作得很好......但我不确定如何将 Google Web Font 加载器与它联系起来。下面是我加载字体的代码，然后是 imagesLoaded Packery 布局。如果有人能提出一种在 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 回答
3

这一切都是为了创建最佳算法来解决您的问题，这需要对问题进行稳健的分析，然后找到所有可能的解决方案，最后应用最佳解决方案。

问题 ：

  • 为页面创建砌体效果，这取决于不同不相关元素（webfonts 和图像）的加载，或者换句话说，取决于不相关页面元素的异步加载。

可能的算法：

  • 加载一个项目（webfont，或首先加载图像），并在第一个项目成功加载后，开始加载另一个

  • 使用标志，并异步调用两个加载函数，基于返回的标志，开发人员可以决定做什么。

第一个算法肯定是错误的

  • 与系列调用一样，如果一个调用因任何原因失败，其余调用将不会发生，因为它依赖于另一个项目加载回调。

  • 加载项目所需的时间会更长，因为事件是以串行方式发生的，而不是以并行方式发生的。

第二种算法似乎还可以

解决方案 ：

参考webfontloader和imagesLoaded的两个文档

  1. 创建两个标志变量

    var imagesAreLoaded = false , fontsAreLoaded = false

  2. 在加载事件的成功回调上将每个标志设置为真

对于webfontloader，如果您想将仅在您的packery插件中使用的字体给予最高优先级，那么您应该使用fontactive，如果插件依赖于多个系列，您最好使用active：

WebFontConfig = {  
  active: function() { // set fontsAreLoaded to true here }, 
  fontactive: function(familyName, fvd) { // set fontsAreLoaded to true here } 
};

WebFontConfig 是您传递给 webfontloaderload方法的对象。

  1. 对事件做同样的imagesLoaded事情

    $('#container').imagesLoaded()
    .done( function( instance ) { //在此处设置 imagesAreLoaded 为 true })

请注意，imagesLoaded jQuery 插件返回一个 jQuery Deferred 对象。这允许您使用.always(),和.done(),类似于发出的事件。.fail().progress()

  1. 通常一切都应该运行良好，通常字体会在图像之前加载，但是一个好的开发人员应该处理所有可能的情况。

    $(document).load(function() {
    // 如果两个标志都为真，继续加载你的砌体。 // 否则，如果任何一个标志为假，显示警告，重试加载，或任何你认为更好的东西} )

注意： 我的回答并没有真正提供太多编码，因为我认为这两个插件的文档都很清楚，但我认为问题是如何使用正确的算法处理问题。

于 2015-03-17T04:32:34.557 回答
2

就像 ProllyGeek 说的，async 解决方案更合理。代码可能看起来像这样（我测试过——它有效）：

<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 回答