您好,我遇到了从现有数组动态加载字体的问题。
我从谷歌字体中获取所有字体。然后我使用 md-virtual-repeat渲染字体。在每个元素上,我使用指令 rt-font
,该指令的链接函数使用 Web Font Loader 加载所需的字体系列。 。问题就从这里开始了。链接函数开始加载字体,而不是从第一个元素开始。有些元素没有正确应用字体样式,有些元素在单击它之前不会呈现 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)将它们呈现在重复列表中并正确应用它们的字体样式。 我错过了什么,也许我应该使用延迟加载或...
最佳答案
我发现了我的问题并摆脱了md-virtual-repeat
。我用过fork of angular infinite scroll而不是 md-virtual-repeat
,因为它只影响 html,它只是隐藏和显示 DOM 元素。我刚刚在巨大的字体数组上添加了 limitTo
过滤器,以避免 http 请求过载。 angular font select 中使用了同样的东西。
现在我的演示字体选择器可以工作了。肯定有一些东西需要优化和重构,但作为 alfa 版本就可以了。
关于javascript - 使用 md-virtual-repeat 动态加载字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41447257/