在Sapper中进行这种延迟加载的最佳方法是什么:
如果有人可以提供帮助,我会非常高兴:)
答案 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>