provide "loaded" event for ui.interactive_image

nicegui/elements/interactive_image.js

@@ -76,6 +76,7 @@ export default {
       this.loaded_image_width = e.target.naturalWidth;
       this.loaded_image_height = e.target.naturalHeight;
       this.viewBox = `0 0 ${this.loaded_image_width} ${this.loaded_image_height}`;
+      this.$emit("loaded", { width: this.loaded_image_width, height: this.loaded_image_height, source: e.target.src });
     },
     onMouseEvent(type, e) {
       const width = this.src ? this.loaded_image_width : this.size ? this.size[0] : 1;

website/documentation/content/interactive_image_documentation.py

@@ -51,4 +51,15 @@ def blank_canvas():
     ).classes('w-64 bg-blue-50')
 
 
+@doc.demo('Loaded event', '''
+    You can listen to the `loaded` event to know when the image has been loaded.
+''')
+def loaded_event():
+    import time
+
+    ii = ui.interactive_image('https://picsum.photos/640/360')
+    ii.on('loaded', lambda e: ui.notify(f'loaded {e.args}'))
+    ui.button('Change Source', on_click=lambda: ii.set_source(f'https://picsum.photos/640/360?time={time.time()}'))
+
+
 doc.reference(ui.interactive_image)