gpt4 book ai didi

jquery-isotope - 砌体/同位素/包装图像加载 + 网页字体

转载 作者:行者123 更新时间:2023-12-04 06:44:31 29 4
gpt4 key购买 nike

我正在使用 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 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'
});

});

});

最佳答案

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

问题:

  • 创建 Masonry 对您的页面的影响,这取决于不同不相关元素(webfonts 和图像)的加载,或者换句话说,取决于不相关页面元素的异步加载。

  • 可能的算法:
  • 加载一个项目(webfont 或图像优先),并在第一项成功加载后,开始加载另一个
  • 使用标志,并异步调用两个加载函数,基于返回的标志,开发人员可以决定要做什么。

  • 第一个算法肯定是错误的
  • 在系列调用中,如果一个调用因任何原因失败,其余调用将不会发生,因为它取决于另一个项目加载回调。
  • 加载项目所需的时间会更长,因为事件正在发生
    以串联方式,而不是以并联方式。

  • 第二个算法似乎没问题

    解决方案:

    引用 的两个文档webfontloader , imagesLoaded
  • 创建两个标志变量
    var imagesAreLoaded = false , fontsAreLoaded = false
  • 在加载事件成功回调时将每个标志设置为 true

  • webfontloader 如果您想为仅在您的 中使用的字体赋予最高优先级包装插件那么你应该使用 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()
    .完成(功能(实例){
    //在这里设置imagesAreLoaded为true
    })

  • 请注意,imagesLoaded jQuery 插件返回一个 jQuery Deferred 对象。这允许您使用 .always() , .done() , .fail().progress() ,类似于发出的事件。
  • 通常一切都应该运行良好,通常字体会在图像加载之前加载,但是一个好的开发人员应该处理所有可能的情况。

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

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

    关于jquery-isotope - 砌体/同位素/包装图像加载 + 网页字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18004447/

    29 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com