Svelte 组件 onLoad

Question

有没有办法知道 Svelte 组件何时完成加载其所有外部资源，而不是onMount？

onload与事件类似window。

编辑：为了澄清事情，我希望组件在完全加载所有图像后执行某些操作。

EDIT2：我决定使用 javascript 来加载图像。在我看来，这不是最干净的做事方式，但它确实有效。谢谢你！

Answer 1

EDIT2：我决定使用 javascript 来加载图像。在我看来，这不是最干净的做事方式，但它确实有效。谢谢你！

这就是要走的路。Svelte 并不试图包装所有 JS，而只是包装那些能够为其添加真正价值的部分。JS 完全可以满足这种需求。

您可以使用 Svelte操作来使其更容易重用：

<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" />