`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

影像加载事件

监听影像源的开始、完成与失败事件,做一个可视化的加载状态条。

OpenLayers 10.3.1 · 更新 2026-10-27
`r`n
源码与运行效果
运行效果
`r`n

说明

ol.source.ImageStatic 会派发 imageloadstart、 imageloadend 与 imageloaderror。 示例在状态栏切换「加载中 / 完成 / 失败」,并记录耗时。

影像由 Canvas 现场生成,所以首次加载几乎瞬间完成; 点「重新加载」会创建新的源,事件会再走一遍。

操作结果
页面首次渲染状态先显示加载中,再变为完成
点「重新加载」重新创建源并再次触发事件
点「模拟失败」无效地址触发 imageloaderror

加载事件只反映源级别状态,瓦片层要用 tileloadstart/tileloadend;别把两类事件混在同一个计数里。

`r`n
`r`n