创建响应式加载器内容

Question

我使用 ReactJS 开发一个电影应用程序，我有一个类似于 Netflix 的图片滑块，我想在显示我的滑块之前嵌入加载内容，就像 youtube 在显示视频之前显示灰色内容一样。

我不知道如何调整我的预加载内容以适应所有设备。

在做一些研究时，我发现了react-content-loader库，它允许你创建SVG格式的预加载内容。

https://github.com/danilowoz/react-content-loader

我设法恢复了窗口的大小，但由于它是SVG，我不知道如何根据窗口的大小修改它，除非我为每个设备创建不同大小的预加载器。

我想了解实现此目的所采用的逻辑的建议，我应该根据窗口的大小动态更改加载内容的大小，还是可以为每个设备创建预加载组件？

感谢您的帮助

Answer 1

这里是react-content-loader的维护者。

如果我遇到你的问题，你想为特定的 Windows 设备大小和工作负责创建不同的加载程序，对吗？如果是这样，首先你必须转动 SVG 流体，如下所示：

<Facebook style={{ width: '100%' }} />

第二点是根据设备更改加载器中的行数，因此您可以执行以下操作：

const Loader = props => {
  let numberLines;

  switch (props.screen) {
    case "mobile": {
      numberLines = 2;
      break;
    }
    case "desktop": {
      numberLines = 3;
      break;
    }
    case "large-screen": {
      numberLines = 4;
      break;
    }
    default: {
      numberLines = 5;
      break;
    }
  }

  return (
    <ContentLoader
      speed={2}
      primaryColor="#f3f3f3"
      secondaryColor="#ecebeb"
      {...props}
    >
      {props.imageType === "circle" ? (
        <circle cx="60" cy="45" r="30" />
      ) : (
        <rect x="20" y="20" rx="5" ry="5" width="64" height="63" />
      )}

      {new Array(numberLines).fill(" ").map((_, i) => {
        return (
          <rect x="105" y={i * 20 + 20} rx="5" ry="5" width="250" height="12" />
        );
      })}
    </ContentLoader>
  );
};

预览链接

让我知道这是否正是您想要的，因为我需要针对这些常见问题改进文档。

谢谢