Javascript 检查瓷砖是否正在加载

我正在使用ollayerswitcher（）生成包含我的图层的侧栏，并在单击时将它们添加到地图中。不幸的是，这可能需要一些时间，这取决于互联网连接等。因此，我想添加一个图标，显示加载时发生了什么

我设法在屏幕中间创建了一个div，它显示了我想显示的图标，但是我不能检查是否有东西在加载。 由于我使用的是layerswitcher，因此我的层没有明确定义为变量（如中），因此我无法使用该示例

如果有人能帮助我，谢谢

编辑：我正在尝试用一个图层来运行它。现在平铺。我想如果我这样做，并将源层添加到我的地图中，我应该得到一个控制台输出“加载”，然后是“完成”，但我没有得到输出

var source = new ol.layer.Tile({
                    title: "Baden-Württemberg",
                    zIndex: 2,
                    visible: false,
                    source: new ol.source.TileWMS({
                        url: "https://forestwatch.lup-umwelt.de/app/ows/index.php/geoserver/forestwatch/wms?",
                            params: {
                                'LAYERS': "forestwatch:baden_wuertemberg_maske"
                            }
                        
                    })
                })
                
var IMG = document.getElementById("loading");

source.on('tileloadstart', function () {
   console.log("Loading");
    });

source.on('tileloadend', function () {
   console.log("Done");
});  

PS：我真的不在乎是否必须使用jquery，如果有使用它的解决方案，请告诉我

编辑：@Mike使用source.getSource（）.on（）完成了这项工作，但现在我的地图正在跳转

#loading {
position: relative;
display: none;
font-size: 40px;
left: 50%;
top: 50%;
z-index: 10000;
/*    width: 30px;
height: 30px;*/
background-color: transparent;
color: black;
}

---

这是该分区的css。编辑：位置：修复使其工作，因为它现在始终处于相同的位置。

您有一个实例吗？或者更多的你的code@JB_DELR我添加了一些单层示例的代码。我的html基本上是一个映射，带有一个div（id=“loading”）作为覆盖（尽管我很乐意让这些东西甚至提供一个控制台日志），您的变量

source

是一个层。要在其源代码上收听事件，您需要（…）上的

source.getSource（）。

谢谢@Mike！现在可以了！你能把它作为一个答案贴出来让我接受吗？编辑：我还有一个问题：如果我使用这个，我会在加载过程中让贴图上下“跳跃”，知道为什么吗？如果它在隐藏和显示div时跳跃，可能是css问题。