使用 md-virtual-repeat 动态加载字体

Question

你好，我遇到了从现有数组动态加载字体的问题。

我从 google 字体中获取所有字体。然后我使用 md-virtual-repeat to render fonts. On each element I use directive rt-font, link function of this directive loads needed font family with Web Font Loader。问题就在这里开始了。 Link 函数不是从第一个元素开始加载字体。某些元素未正确应用字体样式，其中一些元素在单击

之前不会呈现 font.name

我有codepen here。所以我假设我在部分动态字体加载和渲染中破坏了逻辑

vm.infiniteItems = {
  items: [],
  numLoaded_: 0,
  toLoad_: 0,
  maxLen: 810,
  // Required.
  getItemAtIndex: function(index) {
    if (index > this.numLoaded_) {
      this.fetchMoreItems_(index);
      return null;
    }
    return this.items[index];
  },
  // Required.
  getLength: function() {
    return this.numLoaded_ + 5;
  },
  fetchMoreItems_: function(index) {
    if (this.toLoad_ < index) {
      this.toLoad_ += 5;
      if (this.toLoad_ <= this.maxLen){
        var partOfFonts = vm.fonts.slice(this.numLoaded_, this.toLoad_);
        this.items =  this.items.concat(partOfFonts);
        this.numLoaded_ = this.toLoad_;
      }
    }
  }
}

请有人帮我解释我应该如何以及以什么顺序做的逻辑： 1) 从数组部分加载字体 ин 5 个元素 2）在重复列表中呈现它们并正确应用它们的字体样式。我错过了什么，也许我应该使用延迟加载或者...

Answer 1

我发现了我的问题并摆脱了 md-virtual-repeat。我用了fork of angular infinite scroll instead of md-virtual-repeat, because it only affects the html, it just hides and shows DOM elements. I just added limitTo filter on my huge fonts array to avoid overloading of http requests. Same thing used in angular font select。现在我的演示字体选择器可以工作了。肯定有一些东西需要优化和重构，但作为 alfa 版本就可以了。

使用 md-virtual-repeat 动态加载字体

Load fonts dynamically with md-virtual-repeat

javascript

fonts

angularjs

webfont-loader

angular-material