Blazor WASM首次加载页面时BlazorPanzoom JS未加载致报错求助

问题原因 #

首次进入页面时，Blazor组件渲染调用blazorPanzoom.createPanzoomForReference方法时，对应的JS脚本还未加载完成，导致blazorPanzoom未定义；刷新页面后浏览器缓存了脚本，加载速度变快，组件渲染时脚本已就绪，因此功能正常。

解决方案 #

方案1：确保Panzoom脚本加载完成后再启动Blazor #

修改index.html中的脚本加载逻辑，监听Panzoom相关脚本的加载事件，等待两个脚本都加载完成后再启动Blazor：

<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script src="/js/site.js"></script>
<script src="/js/idb.js"></script>
<script src="/js/localTerritoryMobiStore.js"></script>

<script>
  let panzoomScriptCount = 0;
  function checkPanzoomReady() {
    panzoomScriptCount++;
    // 等待panzoom.min.js和blazorpanzoom.js都加载完成
    if (panzoomScriptCount === 2) {
      StartBlazor();
    }
  }
</script>

<!-- 给Panzoom脚本添加加载完成监听 -->
<script src="_content/BlazorPanzoom/panzoom.min.js" onload="checkPanzoomReady()"></script>
<script src="_content/BlazorPanzoom/blazorpanzoom.js" onload="checkPanzoomReady()"></script>

<!-- 其他脚本保持不变 -->
<script src="_content/BlazorGoogleMaps/objectManager.js"></script>
<script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="_content/WYSIWYGTextEditor/quill-blot-formatter.min.js"></script>
<script src="_content/WYSIWYGTextEditor/BlazorQuill.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<!-- 移除原来单独的StartBlazor()调用 -->

方案2：组件级延迟渲染 #

在使用Panzoom的组件中，先检查blazorPanzoom是否可用，确认后再渲染组件：

@inject IJSRuntime JSRuntime

@if (_isPanzoomReady)
{
    <Panzoom WheelMode="WheelMode.ZoomWithWheel">
        <img @ref="@context.ElementReference" 
             id="mappic" 
             class="@_class w-100 img-fluid align-self-center align-middle d-block mx-auto" 
             src="data:image;base64,@System.Convert.ToBase64String(_map.ImgImage)" 
             alt="@_map.MapKey"/>
    </Panzoom>
}
else
{
    <div class="text-center">加载地图中...</div>
}

@code {
    [Parameter] public Map _map { get; set; }
    [Parameter] public string _class { get; set; }
    private bool _isPanzoomReady;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 循环检查blazorPanzoom是否已加载
            while (!await JSRuntime.InvokeAsync<bool>("eval", "typeof blazorPanzoom !== 'undefined'"))
            {
                await Task.Delay(100);
            }
            _isPanzoomReady = true;
            StateHasChanged();
        }
    }
}

方案3：动态导入脚本 #

在组件初始化时动态加载Panzoom的JS脚本，确保脚本加载完成后再使用组件：

@inject IJSRuntime JSRuntime

<Panzoom WheelMode="WheelMode.ZoomWithWheel">
    <img @ref="@context.ElementReference" 
         id="mappic" 
         class="@_class w-100 img-fluid align-self-center align-middle d-block mx-auto" 
         src="data:image;base64,@System.Convert.ToBase64String(_map.ImgImage)" 
         alt="@_map.MapKey"/>
</Panzoom>

@code {
    [Parameter] public Map _map { get; set; }
    [Parameter] public string _class { get; set; }

    protected override async Task OnInitializedAsync()
    {
        // 动态加载Panzoom依赖脚本
        await JSRuntime.InvokeVoidAsync("import", "_content/BlazorPanzoom/panzoom.min.js");
        await JSRuntime.InvokeVoidAsync("import", "_content/BlazorPanzoom/blazorpanzoom.js");
    }
}

内容的提问来源于stack exchange，提问作者user3415508