延迟加载图像(svelte / sapper)

时间:2018-04-26 12:55:25

标签: svelte

在Sapper中进行这种延迟加载的最佳方法是什么:

  1. 导航至包含图片的页面
  2. 首先从src下载小图片
  3. 从data-src开始加载更大的版本并将其更改为src 准备好了
  4. 导航到另一页
  5. 回到图片页面,已经加载了更大的图片
  6. 如果有人可以提供帮助,我会非常高兴:)

1 个答案:

答案 0 :(得分:1)

您正在寻找actions。这些是在将元素添加到DOM时运行的函数,并返回具有destroy和(可选)update方法的对象。

你可以这样做(interactive demo here):

<img
  alt="random photo"
  src="https://picsum.photos/100/50"
  use:lazy="{src: 'https://picsum.photos/400/200'}"
>

<style>
  img {
    width: 400px;
    height: 200px;
  }
</style>

<script>
  const loaded = new Map();

  export default {
    actions: {
      lazy(node, data) {
        if (loaded.has(data.src)) {
          node.setAttribute('src', data.src);
        } else {
          // simulate slow loading network
          setTimeout(() => {
            const img = new Image();
            img.src = data.src;
            img.onload = () => {
              loaded.set(data.src, img);
              node.setAttribute('src', data.src);
            };
          }, 2000);
        }

        return {
          destroy(){} // noop
        };
      }
    }
  };
</script>