bee*_*imi 6 typekit jquery-masonry jquery-isotope webfont-loader packery
我在网站上使用Packery.js [ http://packery.metafizzy.co/ ]并且在页面加载时遇到一些布局问题.我查看了Mason,Isotope和Packery的文档(所有非常相似的插件,全部由David DeSandro开发),并讨论了在加载所有图像以及任何webfonts之后应该触发布局的问题.
http://packery.metafizzy.co/appendix.html
我的Packery工作得很好,只能使用imagesLoaded ......但我不确定如何将Google Web Font加载器与之配合使用.下面是我加载字体的代码,后面是imagesLoaded Packery Layout.如果任何人都可以建议在Web字体和图像加载之后让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'
});
});
});
这一切都是为了创建最佳算法来解决您的问题，这需要对问题进行稳健分析，然后找到所有可能的解决方案，最后应用最佳解决方案。
问题 ：
可能的算法：
加载一个项目（首先是网页字体或图像），并在成功加载第一个项目后，开始加载其他项目
使用标志，并异步调用两个加载函数，根据返回的标志，开发人员可以决定要做什么。
第一个算法肯定是错误的
与在系列调用中一样，如果一个调用因任何原因失败，则其余调用将不会发生，因为它取决于另一个项目加载回调。
加载项目所需的时间会更长，因为事件是以串行方式发生的，而不是以并行方式发生的。
第二个算法似乎没问题
解决方案 ：
参考webfontloader和imagesLoaded的两个文档
创建两个标志变量
var imagesAreLoaded = false , fontsAreLoaded = false
在加载事件成功回调时将每个标志设置为 true
对于webfontloader，如果您想为仅在您的Packery插件中使用的字体提供最高优先级，那么您应该使用fontactive，如果该插件依赖于多个系列，您最好使用active：
WebFontConfig = {
active: function() { // set fontsAreLoaded to true here },
fontactive: function(familyName, fvd) { // set fontsAreLoaded to true here }
};
WebFontConfig 是您传递给 webfontloader 方法的对象load。
对imagesLoaded事件做同样的事情
$('#container').imagesLoaded()
.done( function( instance ) { //此处将 imagesAreLoaded 设置为 true })
请注意 imagesLoaded jQuery 插件返回一个 jQuery Deferred 对象。这允许您使用.always()、.done()和，.fail()与.progress()发出的事件类似。
通常一切都应该运行良好，并且通常字体会在图像之前加载，但优秀的开发人员应该处理所有可能的情况。
$(document).load(function() {
// 如果两个标志都为 true ，则继续加载您的砌体。 // 否则，如果任一标志为 false，则显示警告，重试加载，或您认为更好的任何内容 } ）
注意： 我的答案并没有真正提供太多编码，因为我认为这两个插件的文档都非常清楚，但我认为问题是如何使用正确的算法来处理问题。