How do I determine when an image is fully loaded?
I have one VerticalLayout and I added one image component to it. Sometimes when we got a bad connection, I noticed that this image was loading slowly. So, I have an idea to show this image after it is fully loaded, and I would like to show the gif loading at the time of loading.
Since I am using GWT I am using LoadHandler for this situation as below
fullSizeImage.addLoadHandler(new LoadHandler() {
public void onLoad(final LoadEvent event) {
loadingImage.setVisible(false);
}
});
Above the snippet, my loading gif image will be shown while my actual image is loading, and it will hide when my acutal image is fully loaded. How can I figure this out in Vaadin ?
source to share
Vaadin is server side and its components don't actually have all the possible GWT methods. Therefore, when you create an image component, it binds to the parent VerticalLayout. The image is then loaded with a server request from the client.
I think there is no way to create a custom Vaadin widget - or extend existing functionality - that implements your GWT code above. Please note that gif loading must be preprogrammed and cached by the client to be displayed immediately after the component is attached.
source to share
You can try with Upload . It offers several features to help control the boot process (start / progress / shutdown).
Here is an official example of using interfaces Upload.Receiver
, Upload.StartedListener
and Upload.SucceededListener
(take a closer look ImageReceiver
).
Hope this helps.
source to share