数据加载太快时骨架加载器会闪烁

Question

我正在使用 Vue 3，我尝试在加载数据时为占位符实现一个骨架加载器，如果我在浏览器的“网络”选项卡中打开限制，我可以看到它可以工作。然而，当数据加载太快时，我还可以看到骨架加载器如何闪烁。

在这里，我尝试使用

setTimeout

并在里面放置了

isLoaded

ref，当图像完全加载时，该值设置为 true。但是延迟的作用是延长时间，并且当数据加载快速时，我需要骨架加载器不可见。我希望它仅在数据加载缓慢时可见。

onMounted(() => {
    const img = new Image(getSrc('.jpg'));
    img.onload = () => {
        setTimeout(() => {
            isLoaded.value = true;
        }, 300);
    };
    img.src = getSrc('.jpg');
});

请给出解决方案。

Answer 1

当数据加载快速时，我需要骨架加载器不可见。我希望它仅在数据加载缓慢时可见。

听起来您需要在显示骨架时超时。数据加载完成后取消。

例如，在适当的最小延迟（例如200ms）后显示骨架。如果数据先加载，则根本不显示它。

const showPlaceholder = ref(false);

// ...

onMounted(async () => {
  // wait 200ms to show the placeholder
  const placeholderTimer = setTimeout(() => {
    showPlaceholder.value = true;
  }, 200);

  const img = new Image(); // the constructor only accepts width / height, not src
  img.src = getSrc('.jpg');
  await img.decode(); // much easier to use than onload
  clearTimeout(placeholderTimer);
  showPlaceholder.value = false;
  isLoaded.value = true;
});