Svelte组件加载 [英] Svelte component onLoad

问题描述

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

类似于window的onload事件。

编辑：要清理问题，我希望组件在完全加载其所有图像后执行某些操作。

EDIT2：我决定使用Java脚本来加载图像。在我看来，这不是最干净的做事方式，但它很管用。 谢谢！

推荐答案

EDIT2：我决定使用Java脚本来加载图像。在我看来，这不是最干净的做事方式，但它很管用。谢谢！

这就是前进的道路。Svelte并不试图包装JS的所有东西，而是只包装它能增加真正价值的东西。在这里，JS完全可以满足这一需求。

您可以使用Svelteaction使其更容易重复使用：

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

这篇关于Svelte组件加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！