Question

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

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

在进行一些研究时，我发现了react-content-loader库，该库使您可以创建SVG格式的预加载内容。

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

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

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

感谢您的帮助

Answer 1

SVG可缩放（可缩放矢量图形），因此您应该能够对所有屏幕尺寸使用相同的SVG。

您可以选择几种方法来实现这一点，article on it on CSS tricks非常有用。每个选项都有权衡取舍，因此这取决于您要实现的目标以及对您拥有/想要拥有的SVG的控制程度。

下面是两个示例。两者都包裹在一个具有一定百分比宽度的容器中，因此可以缩放以适合各种屏幕尺寸。您还可以通过针对不同屏幕尺寸的媒体查询来设置此宽度。

第一种方法设置SVG的viewbox元素，并且不设置高度和宽度。如本文所述，这意味着SVG将调用以适合父容器，并保留视图框的长宽比。

第二个将SVG设置为图像的src。然后将图像设置为100％的宽度，以便缩放以适合容器的宽度。这样可以减少通过CSS对SVG的控制，但与第一种方法相比，更多的浏览器支持它。

尝试扩展下面的示例，然后调整浏览器的大小以查看SVG的比例。

.svg-container {
  width: 50%;
  border: 1px solid green;

}
img {
 width: 100%;
 }

<p>svg inline</p>
<div class="svg-container">

<svg viewbox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M63.89,9.64C1.58,9.64,0.1,79.5,0.1,93.33c0,13.83,28.56,25.03,63.79,25.03 c35.24,0,63.79-11.21,63.79-25.03C127.68,79.5,126.21,9.64,63.89,9.64z" style="fill:#FCC21B;"/>
  <g>
    <defs>
      <path id="SVGID_1_" d="M63.89,98.06c23.15,0.05,40.56-12.97,41.19-29.05c-27.24,4.91-55.14,4.91-82.38,0 C23.33,85.09,40.74,98.11,63.89,98.06z"/>
    </defs>
    <use style="overflow:visible;fill:#FFFFFF;" xlink:href="#SVGID_1_"/>
    <clipPath id="SVGID_2_">
      <use style="overflow:visible;" xlink:href="#SVGID_1_"/>
    </clipPath>
    <g style="clip-path:url(#SVGID_2_);">
      <path d="M78.05,108c-1.1,0-2-0.9-2-2V61.07c0-1.1,0.9-2,2-2s2,0.9,2,2V106C80.05,107.1,79.16,108,78.05,108 z" style="fill:#2F2F2F;"/>
    </g>
    <g style="clip-path:url(#SVGID_2_);">
      <path d="M92.21,108c-1.1,0-2-0.9-2-2V61.07c0-1.1,0.9-2,2-2s2,0.9,2,2V106C94.21,107.1,93.32,108,92.21,108 z" style="fill:#2F2F2F;"/>
    </g>
    <g style="clip-path:url(#SVGID_2_);">
      <path d="M63.89,108c-1.1,0-2-0.9-2-2V61.07c0-1.1,0.9-2,2-2s2,0.9,2,2V106 C65.89,107.1,64.99,108,63.89,108z" style="fill:#2F2F2F;"/>
      <path d="M49.72,108c-1.1,0-2-0.9-2-2V61.07c0-1.1,0.9-2,2-2s2,0.9,2,2V106 C51.72,107.1,50.83,108,49.72,108z" style="fill:#2F2F2F;"/>
      <path d="M35.56,108c-1.1,0-2-0.9-2-2V61.07c0-1.1,0.9-2,2-2s2,0.9,2,2V106 C37.56,107.1,36.67,108,35.56,108z" style="fill:#2F2F2F;"/>
    </g>
  </g>
  <path d="M64.01,100.56h-0.25c-24.13,0-42.86-13.52-43.56-31.46c-0.03-0.76,0.29-1.49,0.86-1.98 c0.57-0.5,1.33-0.71,2.08-0.57c26.82,4.84,54.67,4.84,81.5,0c0.75-0.14,1.51,0.08,2.08,0.57c0.57,0.5,0.89,1.23,0.86,1.98 C106.87,87.04,88.14,100.56,64.01,100.56z M63.88,95.56h0.13c19.55,0,35.56-10.1,38.2-23.52c-25.29,4.18-51.36,4.18-76.65,0 c2.64,13.42,18.65,23.52,38.2,23.52H63.88z" style="fill:#2F2F2F;"/>
  <path d="M31.96,54.45c-0.78,1.28-2.44,1.7-3.73,0.93c-1.29-0.77-1.71-2.42-0.96-3.71 c0.18-0.31,4.6-7.62,14.37-7.62c9.78,0,14.2,7.31,14.39,7.62c0.76,1.29,0.32,2.97-0.97,3.73c-0.44,0.26-0.91,0.38-1.39,0.38 c-0.92,0-1.83-0.47-2.34-1.32c-0.13-0.22-3.12-4.96-9.69-4.96C35.07,49.49,32.1,54.24,31.96,54.45z" style="fill:#2F2F2F;"/>
  <path d="M100,55.39c-0.43,0.26-0.91,0.38-1.37,0.38c-0.94,0-1.85-0.49-2.36-1.34 c-0.11-0.2-3.08-4.94-9.66-4.94c-6.69,0-9.66,4.89-9.69,4.94c-0.77,1.29-2.43,1.73-3.73,0.96c-1.29-0.76-1.73-2.44-0.96-3.73 c0.18-0.31,4.6-7.62,14.38-7.62c9.77,0,14.18,7.31,14.36,7.62C101.73,52.96,101.29,54.63,100,55.39z" style="fill:#2F2F2F;"/>
</svg></div>
<p>svg as img src</p>
<div class="svg-container">

<img src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Emoji_u1f601.svg"/>
</div>

Answer 2

在我浏览几篇文章时，我发现这些软件包适合于所述问题：

1）https://www.npmjs.com/package/react-loading-skeleton（每周12760次下载），

2）https://www.npmjs.com/package/react-skeleton-loader（每周2413次下载），

3）https://www.npmjs.com/package/@trainline/react-skeletor（每周783次下载）。

React-skeletor甚至还提供了一篇文章来帮助您更好地理解：

1）https://codeburst.io/achieve-skeleton-loading-with-react-a12404678030。

我假设您会选择“ react-loading-skeleton”，因为它们的下载次数最多，但是我建议您阅读有关“ react-skeletor”的信息，如果这对您有意义问题，您可以尝试一下。

Answer 3

反应内容加载器的维护者。

如果遇到问题，您想为特定的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>
  );
};

Link to preview

让我知道您是否确实想要，因为我需要针对这些常见问题来完善文档。

谢谢

Answer 4

是的，它类似于我想要的，我在屏幕上使用Loader组件，并且我不想使用该组件。 react-content-loader列表。

我只是要根据大小更改要显示的项目数，在此示例中，大屏幕上有6个

创建响应式加载器内容

4 个答案: