在 Ember Glimmer 组件中使用 ember-render-modifiers 计算初始页面加载时的图像自然宽度答案

【问题标题】：Calculating image natural width on initial page load with ember-render-modifiers in Ember Glimmer components在 Ember Glimmer 组件中使用 ember-render-modifiers 计算初始页面加载时的图像自然宽度
【发布时间】：2020-04-07 09:14:40
【问题描述】：

在使用 Ember 的新 Glimmer 组件之前，我使用了 didInsertElement 生命周期挂钩来计算图像元素的自然宽度。我传递了一个目标宽度，因此我可以在浏览器中调整图像的大小。

didInsertElement() {
    this._super(...arguments);
    if (this.targetWidth && this.targetWidth < this.element.naturalWidth) {
        this.targetHeight = Math.round(this.targetWidth / this.element.naturalWidth * this.element.naturalHeight);
        set(this, 'width', this.targetWidth);
        set(this, 'height', this.targetHeight);
    }
    else {
        set(this, 'width', this.naturalWidth);
        set(this, 'height', this.naturalHeight);
    }

使用 Glimmer 组件，并使用 @ember/render-modifiers，父级传入的 src：

<img {{did-insert this.calculateDimensions}} src={{@src}} width={{this.width}} height={{this.height}}>

在组件JS文件中

@action
calculateDimensions(element) {
    if (this.args.targetWidth && this.args.targetWidth < element.naturalWidth) {
        this.height = Math.round(this.args.targetWidth / element.naturalWidth * element.naturalHeight);
        this.width = this.args.targetWidth;
    }
    else {
        this.width = element.naturalWidth;
        this.height = element.naturalHeight;
    }
    element.setAttribute("width", this.width);
    element.setAttribute("height", this.height);
}

如果您重新加载索引/主页，这一切都可以正常工作。但是，当您第一次到达该站点时，不会渲染图像，因为 element.naturalWidth 的值为零。该元素存在，如果它被记录到控制台，我可以看到自然宽度和高度的值。 ember-render-modifier {{did-insert}} 不是 didInsertElement 的完全替代品吗？

非常感谢任何帮助。

【问题讨论】：

标签： ember.js

【解决方案1】：

我不确定这是否是解决此问题的“Ember”方式，但我使用了加载事件：

<img {{on "load" this.calculateDimensions}} src={{@src}} width={{this.width}} height={{this.height}}>

它解决了这个问题，但我仍然不确定为什么 ember-modifer {{did-insert}} 没有达到同样的效果 - 我假设元素被插入到 DOM 中，因此你可以获取其自然宽度和高度？

【讨论】：

第一次插入img元素的时候，图片还没有加载。您可以将 didInsertElement 想象为图像的 document.ready，并像 window.load 一样加载。加载网页时，window.load 发生在 document.ready 之后。
嗨 - 谢谢你回来 - 所以你认为我的回答在 ember 上下文中还可以吗？
这不是在显示图像并在计算尺寸后调整大小时闪烁 UI 的风险吗？我猜您需要在将图像插入页面之前计算尺寸，或者在计算尺寸之前隐藏图像。