Question

我目前正在使用托管/客户端Blazor WebAssembly应用程序，该应用程序在最初运行时运行良好。

正在呈现的页面的'OnInitializedAsync'方法中，是一个JavaScript调用，用于检索页面上html元素的宽度。如果我在javascript函数中设置了断点，则在初始应用运行时，浏览器将显示渲染的页面，并且元素属性已正确检索。但是，当我刷新浏览器页面时，当遇到断点时，浏览器尚未完成页面渲染，因此元素的宽度为零。

谁能告诉我这是为什么，以及如何解决该问题？

<div @ref="_carPanelWidth">
    ....
</div>

@code {

    private ElementReference _carPanelWidth;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        var carPanelWidth = await JsRuntime.InvokeAsync<int>("utilityFunctions.getElementWidth", new object[] { _carPanelWidth });

        StateHasChanged();
    }
}

window.utilityFunctions = {

    getElementWidth: function (element) {
        return element.offsetWidth;
    }
};

Answer 1

渲染网格时，我也遇到类似的情况。它会导致看起来不专业的浮华。

我要做的是将html元素标记为隐藏，然后在我知道所有内容都已加载时显示它们。如果这是您遇到的问题，则可以完全消除闪存。

<div id="table_id_div" style="visibility:hidden">

我使用interopt将DataTable.com的内容应用到表上，并在完成后运行javascript ...

$("#" + tableName + "_div").attr('style', 'visibility : visible');

这似乎可以解决问题。

Blazor的OnInitializedAsync事件在DOM完成之前触发

1 个答案: