苗条组件 onLoad答案

【问题标题】：Svelte component onLoad苗条组件 onLoad
【发布时间】：2020-11-22 21:42:52
【问题描述】：

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

类似于window的onload事件。

编辑：为了解决问题，我希望一个组件在完全加载其所有图像后执行一些操作。

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

【问题讨论】：

<svelte:window on:load="{()=>handleonload()}"/> 更多信息svelte.dev/tutorial/svelte-window
谢谢@dagalti！但我的问题是：当我去另一条路线并返回时，这个on:load 函数与onMount 不同，不会被触发。有什么办法可以解决这个问题？
“外部资源”是什么意思？
就我而言：图片。

标签： javascript svelte

【解决方案1】：

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

这就是要走的路。 Svelte 不会尝试包装所有的 JS，而只会包装它可以增加真正价值的东西。在这里，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" />

【讨论】：

这正是我所需要的！谢谢！