如何检测图像何时完全加载？

Question

我有一个VerticalLayout，我在其中添加了一个图像组件。有时，当我们连接不良时，我注意到这个图像加载缓慢。所以，我有一个想法，在完全加载后显示这个图像，我想在加载时显示一些加载gif。

由于我使用的是 GWT ，我使用LoadHandler来解决这种情况，如下所示

fullSizeImage.addLoadHandler(new LoadHandler() {
        public void onLoad(final LoadEvent event) {
            loadingImage.setVisible(false);
        }
});

上面的片段会在我的实际图像加载时显示我的加载gif图像，并且当我的实际图像完全加载时它将隐藏。我怎样才能在 Vaadin 中找到答案？

Answer 1

Vaadin在服务器端，其组件实际上没有所有可能的GWT方法。因此，当您创建图像组件时，它会附加到父VerticalLayout。然后，来自客户端的服务器请求加载图像。

我认为没有办法创建自定义Vaadin小部件 - 或扩展现有功能 - 它实现了上面的GWT代码。请注意，客户端应预取并缓存加载的gif，以便在组件连接时立即显示它。

Answer 2

您可以尝试使用Upload组件。它提供了一些有助于监控上传过程（开始/进度/完成）的功能。

Here是如何使用Upload.Receiver，Upload.StartedListener和Upload.SucceededListener接口的官方示例（仔细查看ImageReceiver类）。

我希望它有所帮助。