检查图像是否加载了 Kotlin/JS for React

Question

在我的应用程序（Kotlin/JS、React）中，图像是从远程资源加载的：

import org.w3c.dom.HTMLElement
import react.RBuilder
...
private var imageForLoad: HTMLElement? = null
...
override fun RBuilder.render() {
    styledDiv {
        css { +Style.div }
        styledImg {
            css { +Style.img }
            ref { imageForLoad = it as? HTMLElement }
        }
    }
    ...
    imageForLoad?.setAttribute("src", remoteResourceURL)
    // how to determine here if an image has already been loaded from a remote source?
}

如何确定图片是否已加载并显示在浏览器中？我在 JavaScript 部分查看了类似的问题，但没有找到在使用 Kotlin/JS.

时如何应用它们

感谢任何comment/answer！

Answer 1

我找到了这个解决方案：

import kotlinx.html.js.onLoadFunction
...
styledImg {
    css { +Style.img }
    ref { imageForLoad = it as? HTMLElement }
    attrs {
        onLoadFunction = { // invoked when the image has loaded 
            ...         
        }
    }
}
...
imageForLoad?.setAttribute("src", remoteResourceURL)

检查图像是否加载了 Kotlin/JS for React

Check if an image is loaded with Kotlin/JS for React

kotlin

reactjs

kotlin-multiplatform

kotlin-js