javascript - slim 组件 onLoad

Question

有没有办法知道 Svelte 组件何时完成了所有外部资源的加载，而不是 onMount ?
它类似于 onload window的事件.
编辑:为了解决问题，我希望一个组件在完全加载其所有图像后做一些事情。
EDIT2:我决定使用 javascript 来加载图像。在我看来，这不是最干净的做事方式，但它确实有效。
谢谢!

Answer 1

EDIT2: I decided to use javascript to load images. In my opinion, this is not the cleanest way to do things, but it works. Thank you!

这就是要走的路。 Svelte 不会尝试包装所有 JS，而只会包装它可以增加真正值(value)的东西。在这里，JS 完全可以满足这种需求。
您可以使用 Svelte action使其更容易重复使用:

<script>
    let waiting = 0
    
    const notifyLoaded = () => {
        console.log('loaded!')
    }
    
    const onload = el => {
        waiting++
        el.addEventListener('load', () => {
            waiting--
            if (waiting === 0) {
                notifyLoaded()
            }
        })
    }
</script>

<img use:onload src="https://place-hold.it/320x120" alt="placeholder" />

<img use:onload src="https://place-hold.it/120x320" alt="placeholder" />

如果您需要在多个组件中重用它，您可能希望将此模式包装到工厂( REPL)中: util.js

export const createLoadObserver = handler => {
  let waiting = 0

  const onload = el => {
      waiting++
      el.addEventListener('load', () => {
          waiting--
          if (waiting === 0) {
              handler()
          }
      })
  }
  
  return onload
}

App.svelte

<script>
    import { createLoadObserver } from './util.js'
    
    const onload = createLoadObserver(() => {
        console.log('loaded!!!')
    })
</script>

<img use:onload src="https://place-hold.it/320x120" alt="placeholder" />

<img use:onload src="https://place-hold.it/120x320" alt="placeholder" />